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
;
    }
}Copy

This creates a new Circle object with the radius 10:

let c = Circle.create(10);
console.log(c.area); // 31.41592653589793Copy

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

let c2 = Circle.create();
console.log(c2); // nullCopy

Check if a value is null #

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

value === nullCopy

For example:

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

console.log(rect === null); // true
console.log(square === null); // falseCopy

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 !== nullCopy

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');
}Copy

Output:

The square is nullCopy

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'Copy

Surprisingly, the typeof null returns 'object':

console.log(typeof null); // 'object'Copy

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;Copy

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 nullCopy

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

object ?. propertyCopy

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;Copy

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); // undefinedCopy

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); // trueCopy

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

console.log(null === undefined); // falseCopy

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.