Module 10 · ES6+ Features

Nullish Coalescing

Intermediate9m read7m practice16m total

Nullish CoalescingES2020DefaultsFalsy Values

Introduction

Nullish coalescing (??) returns its right-hand value only when the left-hand value is null or undefined. It exists because || treats every falsy value as missing, which breaks valid values like 0, false, and "".

Use ?? when the question is "is this value absent?" rather than "is this value truthy?".

Why This Matters

Configuration, pagination, feature flags, form inputs, and numeric settings often use valid falsy values. A senior engineer must not accidentally replace 0 with a default timeout or false with true. Interviewers love this distinction because it reveals whether you understand JavaScript truthiness versus nullish absence.

Theory

The rule

left ?? right evaluates to right only when left is null or undefined. Otherwise it evaluates to left.

`??` vs `||`

|| uses truthiness. It falls back for 0, false, "", NaN, null, and undefined. ?? falls back only for null and undefined.

| Value | value || 'x' | value ?? 'x' | | --- | --- | --- | | 0 | 'x' | 0 | | false | 'x' | false | | "" | 'x' | "" | | null | 'x' | 'x' | | undefined | 'x' | 'x' |

Mixing with `||` or `&&`

JavaScript intentionally forbids mixing ?? with || or && without parentheses. a ?? b || c is a SyntaxError. Write (a ?? b) || c or a ?? (b || c) to show the intended precedence.

Pairing with optional chaining

Optional chaining often produces undefined, so ?? is its natural defaulting partner: user?.settings?.theme ?? 'light'.

Visual Diagrams

Nullish coalescing decision

value ?? fallback
  |
  +-- value is null?       yes -> fallback
  |
  +-- value is undefined?  yes -> fallback
  |
  no
  v
value is returned, even if it is 0, false, empty string, or NaN

`??` is about absence, not truthiness.

Code Examples

Preserving valid falsy values

?? keeps intentional values that || would replace.

Loading…

Parenthesize when combining operators

Mixing ?? with || or && requires parentheses so the intent is explicit.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const values = [0, false, '', null, undefined];
2 
3for (const value of values) {
4  console.log(String(value ?? 'fallback') + '|' + String(value || 'fallback'));
5}

Predict the output #2

javascript

1try {
2  eval('const result = null ?? false || true;');
3} catch (error) {
4  console.log(error.name);
5}

Coding Exercises

Apply configuration defaults safely

Easy

Implement withDefaults(options) so retries defaults to 3, timeoutMs defaults to 1000, and enabled defaults to true. Preserve explicit values 0 and false.

Interview Questions

1When should you use `??` instead of `||` for defaults?

Use ?? when only null and undefined mean missing. Use || when any falsy value should trigger the fallback. For configuration and user input, ?? is usually safer because 0, false, and "" can be valid values.

Asked at:StripeMicrosoftAmazon

2Why is `a ?? b || c` a SyntaxError?

The language disallows mixing ?? with || or && without parentheses to avoid ambiguous-looking expressions. Write (a ?? b) || c or a ?? (b || c) depending on the intended grouping.

Follow-ups

How does `??` pair with optional chaining?
Does `NaN ?? 1` return `NaN` or `1`?

Quiz

1. What is `0 ?? 10`?

2. Which expression is valid and explicit?

Summary

`??` falls back only for `null` and `undefined`.
`||` falls back for all falsy values, including `0`, `false`, and `""`.
Mixing `??` with `||` or `&&` requires parentheses.
Optional chaining plus nullish coalescing is the standard safe-default pattern.

Cheat Sheet

Rule: value ?? fallback uses fallback only for null or undefined.

Preserves: 0, false, "", and NaN.

Common pair: user?.profile?.city ?? 'Unknown'.

Parentheses: use (a ?? b) || c or a ?? (b || c); do not mix ungrouped.