Optional Chaining & Nullish Coalescing

Reviewed & published by Brayan K

Optional chaining (?.) safely reads deeply nested values without crashing on missing data, and nullish coalescing (??) supplies a fallback only when a value is null or undefined.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Together they replace long a && a.b && a.b.c guards and buggy || defaults with two tiny, precise operators.

What You'll Learn in This Lesson

• Read nested properties safely with ?.
• Call optional methods with ?.()
• Index arrays safely with ?.[ ]
• Supply fallbacks with ??
• Know when ?? beats ||
• Set defaults with ??=

📚 Prerequisites: You should understand objects, arrays, and the idea of truthy and falsy values. These operators are all about handling null and undefined gracefully.

🔗 Real-World Analogy: Optional chaining is like a cautious tour guide:

• • At each door (.property) the guide checks if the room actually exists
• • If a room is missing, the tour quietly ends — it returns undefined instead of crashing
• • Nullish coalescing is the backup plan: "if there's truly nothing here, use this instead"

1️⃣ Optional Chaining on Properties

Reading user.address.city throws if address is missing. Optional chaining fixes that: user.address?.city stops and returns undefined the moment a link in the chain is null or undefined. This short-circuiting is the whole point — it never even evaluates what comes after the missing piece.

Only place ?. where data might be missing. If you know user always exists, write user.address?.city — over-using ?. can hide real bugs.

const user = { name: "Ada", address: { city: "London" } };
const ghost = { name: "Nobody" }; // no address

console.log(user?.address?.city);   // ✅ Expected output: London
console.log(ghost?.address?.city);  // ✅ Expected output: undefined

// Without ?. the next line would throw — with it, it's safe
console.log(ghost.address?.city);   // ✅ Expected output: undefined

2️⃣ Optional Calls & Array Access

The same idea works for methods and array indexing. Use obj.method?.() to call a method only if it exists — perfect for optional callbacks. Use arr?.[i] to index only when the array is actually there. If the thing isn't callable or indexable, you get undefined rather than a crash.

Note the syntax: for calls and indexes the ?. comes before the parentheses or brackets — fn?.() and arr?.[0], not fn()?..

const config = {
  log: (msg) => "logged: " + msg,
};

// Method exists → it runs. Method missing → undefined, no crash.
console.log(config.log?.("hi"));    // ✅ Expected output: logged: hi
console.log(config.warn?.("oops")); // ✅ Expected output: undefined

const maybeList = null;
console.log(maybeList?.[0]);         // ✅ Expected output: undefined

const tags = ["js", "ts"];
console.log(tags?.[1]);              // ✅ Expected output: ts

3️⃣ Nullish Coalescing (??), ?? vs ||, and ??=

Optional chaining gives you undefined when data is missing — and ?? turns that into a sensible default. The crucial difference from ||: ?? only falls back for null and undefined, while || also falls back for 0, "", and false. That distinction prevents a very common bug. The ??= operator assigns a default only when the target is nullish.

Pairs beautifully: const city = user?.address?.city ?? "Unknown"; reads safely AND provides a clean default in a single, readable line.

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

// || wrongly discards 0 and "" — ?? keeps them
console.log(settings.volume || 5);   // ✅ Expected output: 5   (wrong default!)
console.log(settings.volume ?? 5);   // ✅ Expected output: 0   (correct)
console.log(settings.label  ?? "n/a"); // ✅ Expected output: (empty string)

// Combine ?. with ??
const user = { profile: null };
console.log(user.profile?.name ?? "Guest"); // ✅ Expected output: Guest

// ??= sets a default only when nullish
const opts = { theme: undefined };
opts.theme ??= "dark";
console.log(opts.theme);             // ✅ Expected output: dark

🎯 Your Turn — Safe Read with a Default

Read city safely and fall back to "Unknown" if it's missing.

const user = { name: "Lee" }; // no address

// 👉 replace ___ : read address.city safely, default to "Unknown"
const city = user?.address?.___ ___ "Unknown";

console.log(city);
// ✅ Expected output: Unknown

🧠 Quick Recall

Predict the output before revealing the answer.

An empty string — ?? only replaces null/undefined, and "" is neither.

fallback — || falls back on any falsy value, and "" is falsy.

undefined — the chain short-circuits at the very first null.

Common Errors & Fixes

• 1️⃣ Using || where 0 or "" is valid
• 2️⃣ Wrong placement of ?. for calls
• 3️⃣ Mixing ?? with || without parentheses
• 4️⃣ Expecting ?. to stop a later non-optional crash

🎯 Mini Challenge — Robust Config Reader

Read deeply nested settings safely and apply sensible defaults that keep valid 0 values.

function readVolume(config) {
  // 👉 read audio.volume safely; default to 50 only if it is missing
  return config?.audio?.volume ?? 50;
}

console.log(readVolume({ audio: { volume: 0 } }));  // ✅ Expected output: 0
console.log(readVolume({ audio: {} }));             // ✅ Expected output: 50
console.log(readVolume(null));                      // ✅ Expected output: 50

Quick Reference

📚 Keep Learning

• MDN: Optional chaining (?.)
• MDN: Nullish coalescing operator (??)
• MDN: Nullish coalescing assignment (??=)

🎉 Lesson Complete — Optional Chaining & Nullish Coalescing!

• ✅ ?. short-circuits to undefined on null/undefined links
• ✅ Works for properties, calls (?.()), and indexes (?.[ ])
• ✅ ?? only falls back for null/undefined — keeps 0, "", false
• ✅ ??= assigns a default only when the target is nullish

Practice quiz

Continue this course

• Previous: Deploying JavaScript Apps (CDN, Minification, Bundling)
• Next: Essential Array Methods — find, some, every, flat, at, and immutable toSorted/toReversed
• Quick reference: JavaScript cheat sheet

Frequently asked questions

What exactly does optional chaining (?.) do?

It reads a property, calls a method, or indexes an array only if the value to its left is not null or undefined. If that value IS null or undefined, the whole expression short-circuits and evaluates to undefined instead of throwing a 'cannot read property of undefined' error.

What is the difference between ?? and ||?

The OR operator || falls back whenever the left side is falsy — that includes 0, empty string, and false. The nullish coalescing operator ?? only falls back when the left side is null or undefined. Use ?? when 0, '', and false are valid values you want to keep.

What does ??= do?

It is nullish assignment. x ??= y assigns y to x only if x is currently null or undefined. It is a concise way to set a default on a variable or property without overwriting an existing meaningful value like 0 or an empty string.

Can I use optional chaining for function calls and array access?

Yes. obj.method?.() calls method only if it exists, and arr?.[0] indexes only if arr is not null/undefined. This is great for optional callbacks and data that may or may not be an array.

Related lessons

• truthy and falsy values