Master Optional Chaining and Nullish Coalescing in JavaScript

Before optional chaining and nullish coalescing were added to JavaScript, developers had to combine several techniques to safely access nested object properties and handle

null

or

undefined

values. Those methods worked but were cumbersome.

1. Using Logical AND (&&)

Early code often checked a property with logical AND:

<code>var value = obj && obj.prop;</code>

This works for a single level but becomes unreadable for deep nesting.

2. Using Logical OR (||) for defaults

To provide a fallback when a variable might be

null

or

undefined

, developers used the OR operator:

<code>var value = obj && obj.prop || defaultValue;</code>

However, this also treats other falsy values (

false

,

0

,

''

) as missing, which can lead to unexpected behavior.

3. Nested Checks

For deeper structures, multiple checks were chained:

<code>var value = obj && obj.level1 && obj.level1.level2 && obj.level1.level2.level3;</code>

While functional, the code is verbose, hard to read, and error‑prone.

What Is the Optional Chaining Operator (?.)

Basic Concept

The optional chaining operator (

?.

) simplifies accessing a property or calling a function on an object that might be

null

or

undefined

. If the left‑hand side is

null

or

undefined

, the whole expression evaluates to

undefined

without throwing an error.

Usage Example

<code>const user = {
    address: {
        city: "Beijing"
    }
};
console.log(user.address?.city); // "Beijing"
console.log(user.unknown?.city); // undefined
</code>

How It Works

When the operand before

?.

is

null

or

undefined

, the expression short‑circuits to

undefined

and no further property access occurs.

<code>console.log(null?.prop); // undefined
console.log(undefined?.prop); // undefined
</code>

What Is the Nullish Coalescing Operator (??)

Basic Concept

The nullish coalescing operator (

??

) returns the right‑hand operand only when the left‑hand operand is

null

or

undefined

. Unlike

||

, it does not treat other falsy values as missing.

Usage Example

<code>let name = null;
const defaultName = "Guest";
console.log(name ?? defaultName); // "Guest"
</code>

How It Works

If the left side is

null

or

undefined

,

??

yields the right side; otherwise it returns the left side unchanged.

<code>console.log(null ?? "default"); // "default"
console.log(undefined ?? "default"); // "default"
console.log("Hello" ?? "default"); // "Hello"
</code>

Combining Both Operators

In real projects, optional chaining and nullish coalescing are often used together to safely retrieve deep values and provide defaults.

<code>const user = {
    address: {
        city: null
    }
};
const cityName = user.address?.city ?? "Unknown City";
console.log(cityName); // "Unknown City"
</code>

This combination first checks whether

user.address.city

exists; if it does not,

??

supplies a fallback, preventing

undefined

from propagating.

By leveraging these ES2020 operators, developers can write cleaner, more maintainable code when dealing with potentially missing data.