Optional Chaining & Nullish Coalescing
Learn how the ?. and ?? operators make it safe and concise to access deeply nested properties and provide sensible defaults, without the clutter of manual null checks.
Reading Time
13 min
Lesson
Lesson 27 of 48
The Problem: Accessing Nested Properties Safely
Real-world data is often deeply nested, and any level of that nesting might be missing — a user object without an address, or an address without a zip code. Trying to read user.address.zip directly throws a TypeError the moment address is null or undefined, crashing your code instead of just giving you an empty result.
The Old && Chaining Approach
Console Output
Click “Run” to see the console output here.
Optional Chaining: ?.
Optional chaining (?.) lets you access a property, and if the value right before the ?. is null or undefined, the entire expression short-circuits to undefined instead of throwing. It reads almost identically to normal property access, just with a ? added before each dot you want to guard.
Optional Chaining for Property Access
Console Output
Click “Run” to see the console output here.
Optional Chaining with Arrays and Function Calls
Optional chaining isn't limited to plain properties. Use ?.[index] for array or bracket access, and ?.() to call a function only if it actually exists — extremely useful for optional callbacks that a caller may or may not have provided.
Array Access and Optional Method Calls
Console Output
Click “Run” to see the console output here.
Nullish Coalescing: ??
The nullish coalescing operator (??) returns its right-hand side only when the left-hand side is null or undefined — nothing else. This is the key difference from the || operator, which also falls through to its right-hand side for any falsy value, including 0, '', NaN, and false. When you want to default a value only when it's truly missing, ?? is almost always what you actually mean.
?? vs. || — The Critical Difference
Console Output
Click “Run” to see the console output here.
Combining ?. and ??
Optional chaining and nullish coalescing are frequently used together: ?. safely reaches into a nested structure, and ?? supplies a fallback for the case where that structure (or the final value) turns out to be missing.
Using ?. and ?? Together
Console Output
Click “Run” to see the console output here.
Short-Circuiting Behavior
Once ?. hits a null or undefined value, it stops evaluating immediately — it does not attempt to read further properties or call further methods in the chain. This matters if a later part of the chain includes a function call: that function simply never runs if an earlier link is missing, which can be a useful guard against unnecessary work or side effects.
Short-Circuiting in Practice
Console Output
Click “Run” to see the console output here.
When to Reach for Each Operator
- Use ?. whenever you access a property, index, or call a method that might not exist at any point in the chain.
- Use ?? when defaulting a value that could legitimately be 0, an empty string, or false — anything where || would give the wrong answer.
- Use || only when any falsy value truly should be treated as "use the default."
- Combine ?. and ?? to safely read a nested value and supply a fallback in one expression.
Prefer ?? by Default for Defaults
Unless you specifically want 0, '', or false to trigger a fallback, reach for ?? instead of || when providing default values. It's a safer default habit that avoids a whole class of subtle bugs around falsy-but-valid data.
You Can't Mix ?? with && or || Directly
JavaScript disallows combining ?? directly with && or || in the same expression without parentheses, because the intended precedence would be ambiguous — writing a && b ?? c throws a SyntaxError. Wrap one side in parentheses, like (a && b) ?? c, to make the grouping explicit.