Undefined vs Null

What is the clear difference between undefined and null? They are both used to define empty values, and even the comparison null == undefined evaluates to true.

Other programming languages like Ruby and Python have a single null value (nilor null), so JavaScript is a bit funny in that it has two null values.

We’ve all seen these messages too many times already… and still counting.

Undefined

In JavaScript, the interpreter returns undefined when accessing a variable or object property that is not yet initialized. For example:

The undefined type has only one value: undefined. It is the value assigned to a variable when you declare it but fail to assign it an initial value. In other words, it is an unexpected absence of value.

Null

On the flip side, null represents a missing object reference. JavaScript itself does not set variables or object properties to null. It is dependent on the programmer’s logic to do so, hence it is an intentional absence of a value. While undefined is the "value" assigned to a variable that has not explicitly been given a real value, null is actually an object value indicating that a variable references nothing in particular.

This object is not mutable, has no properties, and there is at all times only one instance of it.

When in doubt, check them out

The typeof operator makes the distinction between the two values:

Whereas the strict quality operator === differentiates the identity of undefined from null:

Although the comparison null == undefined evaluates to true, and thus are considered equal, they are not the same identity (equal without type conversion). As discussed, this is because they are of different types behind the scenes: null being an object and undefined being an undefined type.

The point of difference

The use case for null is the main thing that sets it apart from undefined. This is because null can be used as an assignment value — which is why the typeof operator returns object when checking a null value. Also, another reason is that null is commonly used as an empty reference/placeholder where an object is expected.

This use case is why the JavaScript environment never sets a value to null, and it must always be done programmatically. As MDN puts it:

In APIs, null is often retrieved in place where an object can be expected but no object is relevant.

This is primarily true for the DOM because it is is language-independent and does not fall within the scope of the ECMAScript specification. As it is an external API, attempting to retrieve a non-existent element returns a null value rather than undefined.

Generally, for assigning a non-value to a variable or property to pass it to a function, or return it from a function, null is usually the better option. In a nutshell, JavaScript uses undefined and programmers(should) use null.

Another notable use case for null is an explicit variable nullification (object = null) . This is typically done when a reference is no longer required. By assigning a null value, the reference is purged, and assuming the object is not referenced elsewhere in code, it is designated for garbage collection, thus reclaiming memory.

At the very end…

undefined represents values that are missing, so when coerced, or converted to numeric type, it will become NaN, whereas null represents no value and when coerced, it will become 0. It’s simply doing due diligence with variables — scope, properties, their existence in function parameters, initialization, etc. Also, really understanding the errors thrown by the console can help with debugging code and avoiding them from happening.

Resources