JavaScript Optional Chaining (?.)

The Problem: Nested Access Crashes

Accessing a property on null or undefined throws a TypeError. When working with API responses, optional fields, or user input, this happens constantly:

const user = { name: "Alice", address: null };

// 💥 TypeError: Cannot read properties of null (reading 'city')
const city = user.address.city;

The old workaround was verbose and error-prone:

// The "safe" old way — verbose and doesn't handle all cases
const city = user.address && user.address.city;

This works for null and undefined, but has a subtle bug: if user.address is 0 or '' (valid but falsy), it incorrectly returns 0 or '' instead of checking deeper [citation:11].

The Solution: Optional Chaining

The ?. operator checks if the value before it is null or undefined. If so, it short-circuits and returns undefined instead of crashing [citation:5][citation:15]:

const user = { name: "Alice", address: null };

const city = user?.address?.city;
// → undefined (no crash)

The chain short-circuits at the first nullish value. In this case, user.address is null, so the entire expression returns undefined immediately — .city is never evaluated [citation:1].

Long Short-Circuiting

The short-circuit skips the entire chain, not just the immediate property [citation:1]:

const data = {
    user: {
        profile: null
    }
};

// If user.profile is null, the whole chain returns undefined
const name = data.user?.profile?.name?.firstName;
// → undefined (not an error)

This is called "long short-circuiting" — once a nullish value is found, everything to the right is skipped.

Optional Chaining with Function Calls

Use ?.() to call a method that might not exist [citation:11][citation:15]:

const api = {
    getUser: () => ({ name: "Alice" })
};

// Without optional chaining — crashes if getUser is missing
const user1 = api.getUser();

// With optional chaining — returns undefined if getUser is missing
const user2 = api.getUser?.();
const user3 = api.missingMethod?.(); ; // undefined, no crash

Combining with Nullish Coalescing (??)

Optional chaining pairs perfectly with ?? to provide defaults. Use ?? instead of || because || triggers on any falsy value (including 0, '', false) [citation:2][citation:6]:

const settings = {
    animationDuration: 0,
    headerText: ""
};

// ❌ || returns the default for 0 and ""
const duration1 = settings.animationDuration || 300;  // → 300
const header1 = settings.headerText || "Hello";       // → "Hello"

// ✅ ?? only defaults for null/undefined
const duration2 = settings.animationDuration ?? 300;  // → 0
const header2 = settings.headerText ?? "Hello";       // → ""

The combination is powerful for real-world data:

const city = user?.address?.city ?? "Unknown";
// If user or address or city is nullish, returns "Unknown"