Difference between null and undefined in JavaScript

Here you will learn what is null and undefined in JavaScript and what is the difference between them.

What is a null?

A null means the absence of a value. You assign a null to a variable with the intention that currently this variable does not have any value but it will have later on. It is like a placeholder for a value. The type of null is the object.

let num = null;

console.log(num); // null
console.log(typeof num); // "object"

Sometimes, null variables are the result of erroneous code. For example, if you try to find an HTML element using document.getElelementByID() with the wrong id, then it will return null. So it is recommended to check for null before doing something with that element.

var saveButton = document.getElementById("save");

if (saveButton !== null)
    saveButton.submit();

What is undefined?

A variable is undefined when you haven't assigned any value yet, not even a null.

let num;
console.log(num);//"undefined"

Generally, variables are undefined when you forgot to assign values or change existing code. For example, consider the following Greet() function that returns a string.

function Greet(){
    return "Hi";
}

let str = Greet();//"Hi"

Now, suppose somebody changes the function as below. So now, str will be undefined.

function Greet(){
    alert("Hi");
}
let str = Greet();//undefined

Thus, undefined variables are the result of some code problems.

Difference between null and undefined

You must explicitly assign a null to a variable. A variable has undefined when no value assigned to it.

let num1 = null;
let num2;

console.log(num1);//null
console.log(num2); //undefined

The '' is not the same as null or undefined.

let str = '';

console.log(typeof str);//string
console.log(str === null); //false
console.log(str === undefined); //false

The type of null variable is object whereas the type of undefined variable is "undefined".

let num1 = null;
let num2;

console.log(typeof num1);//"object"
console.log(typeof num2); //"undefined"

Use the === operator to check whether a variable is null or undefined. The == operator gives the wrong result.

let num1 = null;
let num2;

console.log(num1 == null); //true
console.log(num2 == undefined);//true

console.log(num1 == undefined);//true (incorrect)
console.log(num2 == null);//true (incorrect)

console.log(num1 === null); //true
console.log(num2 === undefined);//true

console.log(num1 === undefined);//false
console.log(num2 === null);//false

console.log(num1 == num2);//true (incorrect)
console.log(num1 === num2);//false

The null and undefined variables are falsy to if-statements and ternary operators.

let num1 = null;
let num2;

if(num1)
{
    console.log(num1);
}
else
{
    console.log("num1 is null");
}

if(num2)
{
    console.log(num2);
}
else
{
    console.log("num2 is undefined");
}

A null variable treated as 0 in an numeric expression whereas undefined variable will be NaN.

let num1 = null;
let num2;

console.log(num1 + 10);//10
console.log(num2 + 10); //NaN

It will give wrong result when concatenated with string.

let num1 = null;
let num2;

console.log(num1 + " Hello");//"null Hello"
console.log(num2 + " Hello"); //"undefined Hello"

Note: The null and undefined variables are one of the main reasons for runtime errors in JavaScript. The best practice is to check variables for null or undefined before using them.