An Essential Guide to JavaScript null

Summary: in this tutorial, you’ll learn about the JavaScript null and how to handle it effectively.

What is null in JavaScript

JavaScript null is a primitive type that contains a special value null.

JavaScript uses the null value to represent the intentional absence of any object value.

If you find a variable or a function that returns null, it means that the expected object couldn’t be created.

The following example defines the Circle class whose constructor accepts an argument radius. The Circle class has a static method called create() that returns a new Circle object with a specified radius.

class Circle {
    constructor(radius) {
        this.radius = radius;
    }
    get area() {
        return Math.PI * Math.pow(this.radius, 2);
    }

    static create(radius) {
        return radius > 0 ? new Circle(radius) : null
;
    }
}Code language: JavaScript (javascript)

This creates a new Circle object with the radius 10:

let c = Circle.create(10);
console.log(c.area); // 31.41592653589793Code language: JavaScript (javascript)

However, the following example returns null because the radius argument isn’t passed into the create() method:

let c2 = Circle.create();
console.log(c2); // nullCode language: JavaScript (javascript)

Check if a value is null

To check if a value is null , you use the strict equality operator === like this:

value === nullCode language: JavaScript (javascript)

For example:

const rect = null;
const square = {
    dimension: 10
};

console.log(rect === null); // true
console.log(square === null); // falseCode language: JavaScript (javascript)

The rect === null evaluates to true because the rect variable is assigned to a null value. On the other hand, the square === null evaluates to false because it’s assigned to an object.

To check if a value is not null, you use the strict inequality operator (!==):

value !== nullCode language: JavaScript (javascript)

JavaScript null features

JavaScript null has the following features.

1) null is falsy

Besides false, 0, an empty string (''), undefined, NaN, null is a falsy value. It means that JavaScript will coerce null to false in conditionals. For example:

const square = null;
if (square) {
    console.log('The square is not null');
} else {
    console.log('The square is null');
}Code language: JavaScript (javascript)

Output:

The square is nullCode language: JavaScript (javascript)

In this example, the square variable is null therefore the if statement evaluates it to false and executes the statement in the else clause.

2) typeof null is object

The typeof value returns the type of the value. For example:

console.log(typeof 10); // 'number'Code language: JavaScript (javascript)

Surprisingly, the typeof null returns 'object':

console.log(typeof null); // 'object'Code language: JavaScript (javascript)

In JavaScript, null is a primitive value, not an object. It turns out that this is a historical bug from the first version of JavaScript that may never be fixed.

A common JavaScript null mistake

In JavaScript, you often call a function to get an object. And then you access the property of that object.

However, if the function returns null instead of an object, you’ll get a TypeError. For example:

let classList = document.querySelector('#save').classList;Code language: JavaScript (javascript)

In this example, we select an element with id save and access its classList property.

If the page doesn’t have any element with the id save, the document.querySelector('#save') returns null. Hence, accessing the className property of the null value results in an error:

Uncaught TypeError: Cannot read property 'classList' of nullCode language: JavaScript (javascript)

To avoid this, you can use the optional chaining operator (?.)

object ?. property

The optional chaining operator returns undefined instead of throwing an error when you attempt to access a property of a null (or undefined) value.

The following example uses the optional chaining operator that returns undefined instead of an error:

let classList = document.querySelector('#save')?.classList;Code language: JavaScript (javascript)

JavaScript null vs. undefined

Both null and undefined are primitive values.

The undefined is the value of an uninitialized vairable or object property.

For example, when you declare a variable without initializing a value, the variable evaluates to undefined:

let counter;
console.log(counter); // undefinedCode language: JavaScript (javascript)

The null represents an intentional absence of an object while the undefined represents an unintentional absence of a value.

In other words, the null represents a missing object while the undefined represents an uninitialized variable.

The null and undefined are equal when you use the loose equality operator (==):

console.log(null == undefined); // trueCode language: JavaScript (javascript)

The strict equality operator === differentiates the null and undefined. For example:

console.log(null === undefined); // falseCode language: JavaScript (javascript)

Summary

• Javascript null is a primitive type that has one value null.
• JavaScript uses the null value to represent a missing object.
• Use the strict equality operator (===) to check if a value is null.
• The typeof null returns 'object', which is historical bug in JavaScript that may never be fixed.
• Use the optional chaining operator (?.) to access the property of an object that may be null.