Interview answer drill

Use this JavaScript interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow JavaScript mastery study plan Practice more JavaScript interview questions

What is the nullish coalescing operator (??) in JavaScript?Frontend interview answer

HighIntermediateJavascript

By FrontendAtlas Team · Updated Apr 10, 2026

Interview focus

This JavaScript interview question tests whether you can explain JavaScript ?? operator: defaulting bugs, precedence, and follow-up pitfalls, connect it to production trade-offs, and handle common follow-up questions.

JavaScript ?? operator: defaulting bugs, precedence, and follow-up pitfalls explanation without falling back to memorized docs wording
Nullish Coalescing and Operators reasoning, edge cases, and production failure modes
How you would answer the most likely JavaScript interview follow-up

Practice more JavaScript interview questions

Interview quick answer

The nullish coalescing operator fixes a production defaulting bug: || overwrites valid 0, '', and false. Strong answers also cover ?., precedence rules, and the follow-up case where empty-but-intentional values still need separate business logic.

Full interview 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 production bug from || defaults where valid values like 0, '', or false get replaced unintentionally. The key follow-up is that ?? only answers 'missing or not'; it does not decide whether an empty-but-intentional value should still be rejected by business rules.

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 state = {
  retryCount: 0,
  subtitle: '',
  emailOptIn: false,
  theme: undefined
};

console.log(state.retryCount || 3);     // 3 ❌ loses valid 0
console.log(state.retryCount ?? 3);     // 0 ✅

console.log(state.subtitle || 'Untitled'); // 'Untitled' ❌ loses valid ''
console.log(state.subtitle ?? 'Untitled'); // '' ✅

console.log(state.emailOptIn || true);  // true ❌ loses valid false
console.log(state.emailOptIn ?? true);  // false ✅

console.log(state.theme ?? 'system');   // 'system' ✅ missing value

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 apiState = {
  profile: {
    stats: { loginCount: 0 },
    badge: ''
  },
  preferences: null
};

const loginCount = apiState.profile?.stats?.loginCount ?? 1; // 0
const badge = apiState.profile?.badge ?? 'New';              // ''
const locale = apiState.preferences?.locale ?? 'en-US';      // 'en-US'

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 }

Follow-up: when ?? is still the wrong tool

?? only answers 'is the value missing?'. It does not answer business rules like 'an empty string should be replaced' or '0 should be rejected.' If the product treats '' as invalid, keep ?? for nullish handling and add a separate validation rule for empty values.

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, '' as an intentionally blank subtitle, and false as a real saved toggle. Using || silently rewrites all three values during render.

Common pitfalls

Using || for data defaults in forms/config screens.
Mixing ?? with || without parentheses.
Assuming optional chaining alone provides default values.
Forgetting that empty-but-invalid values still need separate validation logic.

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.