This guide will look at the difference between null and undefined values in JavaScript. Knowing the difference between these two values is important for debugging and creating bug-free code.
Use your browser console to follow along or try out the code samples discussed in this guide.
Comparing Equality of Null and Undefined Values
In JavaScript, null is a primitive value that is used to signify the intentional absence of an object value, whereas undefined is a primitive value that acts as a placeholder for a variable that has not been assigned a value.
Null and undefined values are equal when compared using the JavaScript equality operator.
Use the equality operator (==) to compare if null and undefined values are equal in JavaScript.
Open your browser console and input the following code, then press Enter.
null == undefined
The output should give you something that looks like this, the returned boolean value of true simply means that the two values are equal.
Strict Equality Comparison
JavaScript also has an identity operator (===), also known as the strict equality operator in addition to the equality operator (==)
The identity operator goes the extra mile by checking if the underlying type of the values being compared is the same. 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, use the triple equal sign as below.
null === undefined
The result of the command above will give you a boolean value of false, In other words, the two values aren’t identical even though they’re equal.
Finding Out the Type of Null and Undefined
Use the built-in JavaScript function typeof() to find out the underlying type of a value. The function takes a single parameter of the value whose type you want to find.
typeof(null)
The null value is of type object as you can see from the output below.
Running a similar test on the undefined value will give you a result of undefined.
typeof(undefined)
Working With Numbers
To explore for more differences, conduct the number test on null and undefined values. 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.
1. Using the isFinite() function—if the value under test is a number, the function returns true; otherwise it returns false.
2. 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”.
To keep things simple, this guide will only use the isFinite() function to test if the value is a number, but feel free to also try the isNaN() function. Both of these functions take the value you want to run the number test on as a parameter.
isFinite(null)
The result is true, meaning null is a value of the type number in JavaScript. Whereas, conducting the same test on undefined returns false.
isFinite(undefined)
Type Coercion
JavaScript is a loosely typed language, and because of this, when conducting mathematical operations JavaScript will automatically convert the result to a type it wants.
Unfortunately this automatic conversion, which is commonly referred to as type coercion, can bring lots of surprises along with it.
Run the following numerical operation on null and undefined in your browser console.
1 + null
3 * null
1 + undefined
3 * undefined;
As you can see, you can conduct some numeric operations on the null value because it’s a number that holds no value. Therefore, it’s treated like a zero. Take note that null is not equal to zero in JavaScript, but it is somehow treated like that in this case.
The numerical operations on the undefined value result in returning the NaN (Not a Number) value. If not treated carefully, you could experience this during runtime.
Avoiding Runtime Bugs
A good understanding of null and undefined values is vital in avoid runtime bugs in your production code. Bugs related to undefined values can be hard to debug and are best avoided.
Consider using TypeScript for strongly-typed code that compiles to JavaScript. In TypeScript your code is checked at compile-time to minimize runtime bugs in your production code.