All topics
46 / 100
Objectsbeginner

Optional Chaining and Nullish Coalescing

Two ES2020 operators for safely accessing deeply nested properties and providing fallback values only for null/undefined.

Two operators that replaced a lot of defensive code.

Optional chaining is like carefully feeling your way down a dark staircase, stopping the instant a step is missing instead of tumbling all the way down (a TypeError). Nullish coalescing is a backup generator that only kicks in when the power is truly out (null/undefined), not just when the lights are merely dim (other falsy values).

Key Concepts

1
?. stops at null or undefined instead of throwing.
    user?.profile?.name
?.nullundefined
2
    // before
    user && user.profile && user.profile.name
3
If user is null, the whole expression is undefined. It does not throw, and it does not evaluate the rest.
usernullundefined
4
Three forms.
    obj?.prop        property
    obj?.[key]       dynamic key
    fn?.()           call it only if it exists
5
    options.onDone?.();        // no error when the callback is absent
    arr?.[0]?.name;
6
?? falls back only on null and undefined.
    const port = config.port ?? 3000;
    const port = config.port || 3000;    // also replaces 0
??nullundefined
7
That difference matters whenever 0, '' or false are legitimate values — which for configuration and form input they usually are.
0''false
8
    count ?? 10     // 0 stays 0
    count || 10     // 0 becomes 10
9
Together they cover the common case.
    const city = user?.address?.city ?? 'Unknown';
10
Mixing ?? with || or && requires parentheses, deliberately:
??||&&
11
    a || b ?? c       // SyntaxError
    (a || b) ?? c     // fine
12
The assignment forms.
    config.retries ??= 3;      // only if null/undefined
    name ||= 'Anonymous';      // if falsy
    flag &&= otherCheck();     // if truthy
13
Where ?. is overused. It silences a legitimate error:
?.
14
    const total = order?.items?.reduce(...) ?? 0;
15
If order should always exist, this turns a bug into a zero. The error would have told you something was wrong; the fallback hides it and produces a report showing nothing sold.
order
16
Use it where the value is genuinely optional — an API field that may be absent, a callback that may not be supplied — not as a way to stop exceptions.
17
One detail worth knowing. ?. short-circuits the whole chain, including calls after it:
?.
18
    a?.b.c.d       // if a is null, nothing after is evaluated
19
What the interviewer is probing.1. "What does ?. return when the left side is null?" Probing: the behaviour. Stalls: "It throws." Moves up: undefined, short-circuiting the rest of the chain including any call.
20
2. "Why is ?? better than || for a default?" Probing: the distinction. Stalls: "They are the same." Moves up: || replaces every falsy value, so a legitimate 0 or empty string is lost; ?? only catches null and undefined.
21
3. "Can you use ?. to call a method?" Probing: the forms. Stalls: "No." Moves up: yes — obj.method?.() calls only if it exists, and arr?.[i] works for indexing.
22
4. "What is the risk of overusing optional chaining?" Probing: hiding bugs. Stalls: "None." Moves up: it silences errors that indicate a real problem, so a typo returns undefined instead of failing loudly.
Use cases:es6syntaxobjects