Null vs Undefined in JavaScript (4 Key Differences)

 

While null and undefined are both primitive types in JavaScript, they have distinct characteristics. In this article, we will guide you about null vs undefined in JavaScript, the key differences between them, along with some examples. Let us get started!

What is null in JavaScript?

When a variable is intentionally left without a value, it is assigned the value of null(i.e. an empty object). Null signifies the absence of value. It is a primitive data type and is often used to indicate that a variable or property does not have a meaningful value.

Let us see an example to understand it better:

//declaring a variable with a null value
var num=null;

//printing the variable
console.log(num);

Output:

null

In this example, we have declared a variable with a Null value. We have printed the same and got the desired output. 

Let us check the type of the variable.:

//declaring a variable with a null value
var num=null;

//checking the type of variable
console.log(typeof(num));

Output:

object

In this example, we have declared a variable and assigned it a null value. We checked the type of the null value using the typeof operator. The output is “object”, which means that null is an empty object. We have obtained the desired result. 

You need to know how to check for null in JavaScript when doing coding in real life.

What is undefined in JavaScript?

Undefined, in general terms, means “not-defined”. In JavaScript, an undefined variable refers to a variable that has been declared but has not been assigned any value. When a variable is not assigned any value, it holds a garbage value. A variable is said to be undefined if it does not have a defined value.

Undefined variables can also occur when we try to access the invalid index of an array. Let us see a few examples of the same:

//declaring a variable
let num;

//printing the variable num
console.log(num);

Output:

undefined

In this example, we have declared a variable “num”, but we have not assigned any value to the variable, so “num” does not hold a defined value. Hence, the output is undefined. We have obtained the desired output. 

Let us see another example where an undefined value can occur:

//declaring an array
let arr=[1,2,3,4,5,6];

//printing the 6th index value of array
console.log(arr[6]);

Output:

undefined

In this example, we are trying to access the value at a non-existent index of an array. The array’s length is 6 and the indexing starts from zero(0). So, the index of the last element of the array is Five (5). Therefore, accessing any index greater than five will give us an undefined value. Hence, we have got the desired output. 

You can also check for undefined in JavaScript to find when it occurs.

Null vs Undefined in JavaScript

Null indicates the intentional absence of any object value. Undefined, on the other hand, occurs when a variable is declared but not assigned any value.

Now that you have a basic idea about both of them, let’s discuss the key differences between null vs undefined in JavaScript:

1) Data Types

The data type of undefined is undefined, whereas the data type of null is object. We can find it using the typeof operator. For example:

// checking the data type of undefined
console.log(typeof undefined);

// checking the data type of null
console.log(typeof null);

Output:

undefined
object

2) Arithmetic Operations

When used in arithmetic operations, undefined results in NaN (Not a Number), whereas null is converted to 0 behind the scenes. Let’s consider the following examples:

// Performing operation with undefined
console.log(undefined + 1);

// Performing operation with null
console.log(null + 1);

Output:

NaN
1

In the above example, undefined + 1 returns NaN because undefined cannot be converted into a valid number. On the other hand, null + 1 results in 1 as null is converted to 0 during the addition.

3) Falsy Values

Both undefined and null are considered falsy values in JavaScript. When used in conditional logic, they will return false. For example:

// Using conditional logic with undefined
console.log(!!undefined);

// Using conditional logic with null
console.log(!!null);

Output:

false
false

4) Comparison Operators

When comparing undefined and null using the JavaScript equality operators, we observe different results. Using the loose equality operator (==), null and undefined are considered equal. However, with the strict equality operator (===), they are not. 

Let’s see an example to understand it better:

// Comparing using ==
console.log(undefined == null);

// Comparing using ===
console.log(undefined === null);

Output:

true
false

In the above examples, undefined == null returns true because the loose equality operator only compares the values. However, undefined === null returns false as the strict equality operator checks both the type and the value.

Finally, let’s compare the null vs undefined values using a tabular format:

Conclusion

In JavaScript, It is essential to understand the null variables and the undefined variables to write robust and clean code. This article is a great guide to begin with for null vs undefined. While both represent the absence of a meaningful value, they are used in slightly different contexts.