Nullish Coalescing

Supplying default values is one of the most common chores in JavaScript, and for years the logical OR (||) operator was the go-to tool. The problem is that || treats every falsy value as “missing” — including 0, "", false, and NaN — which quietly corrupts perfectly valid data. The nullish coalescing operator (??), introduced in ES2020, fixes this by reacting to only null and undefined. This page explains the difference, the precise semantics, and the related ??= logical assignment operator.

The problem with logical OR

|| returns its right-hand operand whenever the left-hand operand is falsy. JavaScript has several falsy values, and most of them are legitimate data you usually want to keep.

const config = { volume: 0, label: "" };

const volume = config.volume || 100; // expected 0, got 100 😬
const label = config.label || "Untitled"; // expected "", got "Untitled" 😬

console.log(volume, label);

Output:

100 Untitled

Both defaults fired even though the original values were intentional. A volume of 0 (muted) and an empty label are valid, but || discarded them.

How nullish coalescing works

The ?? operator returns the right-hand operand only when the left-hand operand is null or undefined. Every other value — including all the falsy ones — passes straight through.

const config = { volume: 0, label: "" };

const volume = config.volume ?? 100; // 0 is kept
const label = config.label ?? "Untitled"; // "" is kept
const missing = config.timeout ?? 5000; // undefined → default

console.log(volume, label, missing);

Output:

0  5000

Tip: Read a ?? b as “a, unless a is null or undefined, in which case b.” It is the operator you almost always want when filling in defaults for function options or API responses.

?? vs || side by side

The two operators only diverge for falsy-but-not-nullish values. This table shows exactly when each one substitutes the default:

Left value	`left \|\| def`	`left ?? def`
`null`	`def`	`def`
`undefined`	`def`	`def`
`0`	`def`	`0`
`""`	`def`	`""`
`false`	`def`	`false`
`NaN`	`def`	`NaN`
`"hi"` / `1`	`"hi"` / `1`	`"hi"` / `1`

Use || when any falsy value should be replaced (rare, but valid). Use ?? when you specifically mean “no value was provided.”

Short-circuiting

Like || and &&, the ?? operator short-circuits: if the left side is not nullish, the right side is never evaluated. This matters when the default is expensive or has side effects.

function loadDefaults() {
  console.log("computing defaults...");
  return { theme: "dark" };
}

const cached = { theme: "light" };

const settings = cached ?? loadDefaults(); // loadDefaults never runs
console.log(settings.theme);

Output:

light

Combining with other operators

You cannot mix ?? directly with || or && without parentheses — JavaScript throws a SyntaxError to prevent ambiguous precedence. Wrap the grouped expression explicitly.

// SyntaxError: Unexpected token '??'
// const x = a || b ?? c;

// Correct: make intent explicit
const x = (a || b) ?? c;
const y = a || (b ?? c);

It pairs especially well with optional chaining, which yields undefined for a missing path — exactly what ?? is designed to catch.

const user = { profile: { name: "Ada" } };

const city = user.profile?.address?.city ?? "Unknown";
console.log(city);

Output:

Unknown