null and undefined in JavaScript

A topic which frequently trips up even seasoned JavaScript developers is the differences and nuances between null and undefined which ‑ on the surface ‑ really ought to behave similarly (if not exactly the same).

What is null?

In JavaScript, null is a special value which you can specifically assign to a variable to show that it has no value (at least at that particular point in time).

let nullVariable = null;console.log(nullVariable);  //=> null

Here, we are indicating that nullVariable exists, but at the moment, it is blank or empty. We have assigned it a value of nothing.

In order for a value to be set to null, it has to have been done manually (for example: if you are emptying a variable). JavaScript does not set a value to null itself.

What is undefined?

In contrast, undefined means that a variable has been set (i.e., it exists), but it has no assignment.

For example:

let undefinedVariable;console.log(undefinedVariable);  //=> undefined

Unlike null, where the value is set explicitly, undefined is the default value assigned by JavaScript when a variable is declared at runtime but not (yet) assigned a value.

Differing typeof

One key difference between the two is when you attempt to check the type of a variable using typeof.

The type of null is object

When interrogating a null variable's type, it will return with object:

console.log(typeof null);  //=> objectlet nullVariable = null;console.log(typeof nullVariable);  //=> object

The type of undefined is undefined

Unlike null, when you evaluate a variable that does not have an assigned value, the returned data type is undefined:

console.log(typeof undefined);  //=> undefinedlet undefinedVariable;console.log(typeof undefinedVariable);  //=> undefined

Why is null an object?

It perhaps seems counter‑intuitive that null is a type of object, and there are many differing opinions. However, the most likely reason null is considered to be an object type may be because of a historical mistake in the design of the language.

The theory goes that when JavaScript was first created, its designers intended for null to represent an empty object pointer, which means that it should have been a primitive data type like undefined. However, the initial version of JavaScript stored values as 32 bits, with the first three bits representing the data type and the remaining bits containing the value. This meant that all object types started from 000. By its nature, null is empty so when read by JavaScript, it returns zeros and, hence is treated as an object.

This has been maintained ever since for backwards compatibility concerns, even though ‑ actually ‑ null is not an object, but rather a special value that represents the absence of any object value.

null and undefined in Arithmetic

The other big difference between the two is when it comes to using them in arithmetic (i.e., addition, subtraction, etc). When used in arithmetic operations, null is converted to 0, whereas undefined becomes NaN:

const number = 44;let nullNumber = null;let undefinedNumber;console.log(number + nullNumber);  //=> 44console.log(number + undefinedNumber);  //=> NaN

The Wrap‑Up

To summarise, the difference between null and undefined:

• null is an explicitly‑defined value, whereas undefined is applied to variables that are declared, but have no value assigned to them.
• null has a type of object, whereas undefined has a type of undefined.
• When used in arithmetic, null converts to 0, whereas undefined is NaN.

Fin.