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 primitive value used to represent an explicit absence, such as no matching object or no result. We can assign it to a variable:

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.

Application code and APIs can return null as part of their contract. For example, document.querySelector() returns null when no element matches. It does not have to appear as a manual assignment in the code calling that API.

What is undefined?

undefined is another primitive value. A declared variable without an assigned value normally starts as undefined, and missing properties or functions with no return value also commonly produce it. We can explicitly assign undefined too.

For example:

let undefinedVariable;

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

In this example, undefined comes from the declaration without an initial value. The difference from null is the convention used to express absence, rather than a rule that one can only be implicit and the other can only be manually assigned.

Differing typeof

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

typeof null returns "object"

Applying typeof to null returns the string "object", despite null being a primitive value:

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

let 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);  //=> undefined

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

Why does typeof null return "object"?

The surprising result is a historical quirk of typeof, rather than evidence that null is an object. It dates back to the representation used in JavaScript's first implementation.

That implementation represented values using a type tag and a value. The tag for an object was 0, and the null pointer representation also produced that tag. This explains the legacy typeof result; it is not a description of how every JavaScript engine stores values today.

The result has been retained for backwards compatibility. null remains a primitive representing absence, and a direct comparison with null is clearer when that is the value we need to detect.

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);  //=> 44
console.log(number + undefinedNumber);  //=> NaN

The Wrap‑up

To summarise, the difference between null and undefined:

• null commonly represents an explicit absence. undefined commonly comes from missing or unassigned values, but either can be returned or assigned explicitly.
• typeof null returns "object" because of a historical quirk; typeof undefined returns "undefined". Both values are primitives.
• When used in arithmetic, null converts to 0, whereas undefined is NaN.

Fin.