What is the nullish coalescing operator (??) in JavaScript?

HighIntermediateJavascript

By FrontendAtlas Team · Updated Mar 2, 2026

Quick Answer

The nullish coalescing operator (??) returns the right value only when the left side is null or undefined. Unlike ||, it does not treat 0, empty string, or false as missing. Strong answers cover precedence, optional chaining, and safe fallback patterns.

Answer

The Core Idea

The nullish coalescing operator (??) gives you a fallback value only when the left side is null or undefined.

It solves a common bug from || defaults where valid values like 0, '', or false get replaced unintentionally.

JAVASCRIPT

const a = null ?? 'fallback';
const b = undefined ?? 'fallback';
const c = 0 ?? 100;
const d = '' ?? 'default-text';
const e = false ?? true;

console.log(a); // 'fallback'
console.log(b); // 'fallback'
console.log(c); // 0
console.log(d); // ''
console.log(e); // false

Expression	When right side is used	Keeps 0/""/false?
`x \|\| y`	When `x` is any falsy value	No
`x ?? y`	When `x` is only nullish (`null`/`undefined`)	Yes

Use ?? for missing-value defaults, not generic truthiness defaults.

JAVASCRIPT

const settings = { retries: 0, label: '' };

console.log(settings.retries || 3); // 3  ❌ loses valid 0
console.log(settings.retries ?? 3); // 0  ✅

console.log(settings.label || 'Untitled'); // 'Untitled' ❌ loses valid ''
console.log(settings.label ?? 'Untitled'); // '' ✅

Best pair: optional chaining + nullish coalescing

?. safely reads nested properties. ?? then provides a fallback only if the final result is nullish. This is a standard production pattern for API/UI data.

JAVASCRIPT

const user = { profile: { nickname: '' } };

const city = user.address?.city ?? 'Unknown City';
const nickname = user.profile?.nickname ?? 'Anonymous';

console.log(city);     // 'Unknown City'
console.log(nickname); // '' (kept, not overwritten)

Operator precedence pitfall

JavaScript does not allow mixing ?? directly with || or && without parentheses. This prevents ambiguous logic.

JAVASCRIPT

// const value = a || b ?? c;
// SyntaxError

const value = (a || b) ?? c;    // ✅ explicit grouping
const value2 = a ?? (b && c);   // ✅ explicit grouping

Nullish coalescing assignment (??=)

Use ??= to assign a default only when a variable is currently nullish. It is useful for config hydration and caching.

JAVASCRIPT

const config = { timeout: null, retries: 0 };

config.timeout ??= 5000;
config.retries ??= 3;

console.log(config);
// { timeout: 5000, retries: 0 }

Situation	Recommended operator	Reason
Defaulting possibly missing API fields	`??`	Keeps valid falsy values while handling null/undefined.
Feature toggle where only true should pass	`\|\|` (sometimes)	Truthiness behavior may be intentional for boolean logic.
Nested optional access with fallback	`?.` + `??`	Safe traversal plus precise missing-value default.

Pick the operator based on intent: missing-value vs truthiness fallback.

Interview one-liner

Use ?? when you want a fallback only for null/undefined; use || when you intentionally want fallback for any falsy value.

Practical scenario
A product dashboard stores 0 as a valid retry count and '' as an intentionally blank subtitle. Using || silently rewrites both values during render.

Common pitfalls

Using || for data defaults in forms/config screens.
Mixing ?? with || without parentheses.
Assuming optional chaining alone provides default values.

Trade-off or test tip
Add test cases for 0, '', false, null, and undefined to ensure fallback logic matches business intent.

Still so complicated?

Think of ?? as saying: 'Only help me if value is truly missing.' It does not interfere when the value is intentionally 0, empty, or false.

Summary

The nullish coalescing operator is a precision tool for defaults. It removes accidental overrides of valid falsy data and is especially powerful when combined with optional chaining in modern frontend codebases.