JavaScript — Null vs. Undefined
Learn the differences and similarities between null and undefined in JavaScript
At first glance,
null and undefined may seem the same, but they are far from it. This article will explore the differences and similarities between null and undefined in JavaScript.What is null?
There are two features of
null you should understand:nullis an empty or non-existent value.nullmust be assigned.
Here’s an example. We assign the value of
null to a:let a = null;
console.log(a); // null
What is undefined?
Undefined most typically means a variable has been declared, but not defined. For example:
let b;
console.log(b); // undefined
You can also explicitly set a variable to equal undefined:
let c = undefined;
console.log(c); // undefined
Finally, when looking up non-existent properties in an object, you will receive undefined:
var d = {};
console.log(d.fake); // undefined
Similarities between null and undefined
In JavaScript there are only six falsy values. Both
null and undefined are two of the six falsy values. Here’s a full list:- false
- 0 (zero)
- “” (empty string)
- null
- undefined
- NaN (Not A Number)
Any other value in JavaScript is considered truthy.
If you’re not familiar with truthy/falsy values in JavaScript, I recommend reading my previous article: JavaScript — Double Equals vs. Triple Equals
Also in JavaScript, there are six primitive values. Both
null and undefined are primitive values. Here is a full list:- Boolean
- Null
- Undefined
- Number
- String
- Symbol
All other values in JavaScript are objects (objects, functions, arrays, etc.).
Interestingly enough, when using
typeof to test null, it returns object:let a = null; let b;
console.log(typeof a); // object
console.log(typeof b); // undefined
This has occurred since the beginning of JavaScript and is generally regarded as a mistake in the original JavaScript implementation.
If you’re not familiar with data types in JavaScript, I recommend reading my previous article: JavaScript Data Types Explained
null !== undefined
As you can see so far,
null and undefined are different, but share some similarities. Thus, it makes sense that null does not strictly equal undefined.null !== undefined
But, and this may surprise you,
null loosely equals undefined.null == undefined
The explanation as to why this is true is a little complex, so bear with me. In JavaScript, a double equals tests for loose equality and preforms type coercion. This means we compare two values after converting them to a common type. Since both
null and undefined are falsy values, when we compare them with loose equality, they are coerced to false prior to comparison.Practical Differences
All of this is great, but what about a practical difference between
null and undefined?
Consider the following code snippet:
let logHi = (str = 'hi') => {
console.log(str);
}
The code above creates a function named
logHi. This function requires one parameter and sets the default of that parameter to hi if it isn’t supplied. Here’s what that looks like:logHi(); // hi
We can also supply a parameter to overwrite this default:
logHi('bye');
// bye
With default parameters,
undefined will use the default while null does not.logHi(undefined); // hi
logHi(null); // null
Thanks to Tim Branyen for the code inspiration.
Summary
nullis an assigned value. It means nothing.undefinedtypically means a variable has been declared but not defined yet.nullandundefinedare falsy values.nullandundefinedare both primitives. However an error shows thattypeof null = object.null !== undefinedbutnull == undefined.
