The Difference between Null and Undefined in JavaScript
By: Mwiza Kumwenda
Tags: JavaScript, Front End Development, Software Development, Programming, Computer Science

The Difference between Null and Undefined in JavaScript

A comparison of null and undefined values

Photo by Pankaj Patel on Unsplash

JavaScript is a powerful, mature, and widely used language. But it can also be strange in its own unique ways.

This post explores the differences between null and undefined values in JavaScript. An understanding of these differences is important in making sure that you avoid runtime bugs in your application code.

Running the code

If you want to follow along or test the code in this post. You can simply, use your web browser’s console to do so.

In Chrome and Firefox, you can access the web browser console by clicking the F12 button on your keyboard.

The anatomy of null and undefined values

In JavaScript, null and undefined are essentially the same or equal. What …? Yes, I know it sounds strange.

null and undefined are in equal in JavaScript because

they are both primitives

both null and undefined are values but with not much meaning and

and are values but with not much meaning and null is used to represent the intentional absence of some object value whereas undefined represents a variable with no value.

To test for equality in JavaScript, we can use the double equal sign == .

null == undefined; // true

The true value above shows that null is indeed equal to undefined in JavaScript.

Type difference

Apart from the equality operator (double equality operator) == , JavaScript also has an identity operator, also known as strict equality or triple equality operator === .

The identity operator === goes an extra mile by checking if the underlying type of the values being compared is equal. This essentially means that even though two values are equal, they might not be identical or strictly equal if their underlying types are different.

To test for strict equality, we will use the triple equal sign as below.

null === undefined; // false

As you can see, the identity operator on null and undefined fails.

Takeaway: null and undefined are equal but they are not identical.

Let us find out the underlying type of each of these values, which make them non-identical.

JavaScript provides the typeof() function which can be used to find the type of some value.

typeof(null); // object

In JavaScript null is of the type object. What about undefined?

typeof(undefined); // undefined

The output shows that undefined is of the type undefined i.e., the value and the value type share the same name.

The number test

Now that we know for a fact that null and undefined are equal but not identical. Could there be other differences that we should be aware of?

To explore for more differences, we will conduct the number test. If a value is a number, it implies that we can conduct numerical operations on it.

There are two main ways to test if a value is a number in JavaScript.

Using the isFinite() function - if the value under test is a number, the function returns true otherwise it returns false. Using the isNaN() function - if the value under test is a number, then it returns false otherwise it returns true.

Note: isNaN, is short for is Not a Number.

isFinite(null); // true

isNaN(null); // false

From the two tests above, we now know that null is a number. What about undefined?

isFinite(undefined); // false

IsNaN (undefined); // true

Fact: null is a number whereas undefined is not a number. This has a huge implication on how the two values play along with mathematical operations, which leads us to the next section.

Type coercion

JavaScript is a loosely typed language and because of this when conducting mathematical operations on “wrong” values, JavaScript will automatically convert the result to some type it wants.

Unfortunately, this automatic conversion, which is commonly referred to as type coercion can bring lots of surprises along with it.

Take a look at the examples below.

1 + null = 1;

3 * null = 0; 1 + undefined = NaN;

3 * undefined = NaN;

As you can see, we can conduct some numeric operations on the null value because it is a number, that holds no value. Therefore, it is treated like a “zero”. Let me point out here that null is not equal to zero, but it is somehow treated like that in this case.

The numerical operations on the undefined value results in returning the is Not a Number value, which is probably what we don’t expect.

Summary

In this guide, we have compared the null and undefined values in JavaScript and we have found out that:

both are primitives

the two values are equal but not identical

null is a number whereas undefined is not

is a number whereas is not null is of the type object whereas undefined is of the type undefined

is of the type object whereas is of the type undefined null plays well with numerical operations whereas undefined yields NaN

A good understanding of these two values could potentially save you a lot of debugging nightmares and bugs in production code.