What Is Optional Chaining in JavaScript?
Learn how JavaScript optional chaining (?.) safely accesses nested properties, calls methods, and pairs with ??.
Expected Interview Answer
Optional chaining, written with the `?.` operator, lets you safely access a nested property, call a method, or index into an array without throwing a TypeError when an intermediate reference is null or undefined, short-circuiting the entire expression to undefined instead.
Before optional chaining, reaching into deeply nested data — like `user.address.city` — required manually checking each level (`user && user.address && user.address.city`) to avoid a "Cannot read property of undefined" crash if `address` did not exist. With `user?.address?.city`, the moment any link in the chain is null or undefined, evaluation stops immediately and the whole expression returns undefined, without attempting to read further or throwing. The operator also works for method calls (`obj.method?.()`, which only calls the method if it exists) and computed/array access (`arr?.[0]`). It is important to note optional chaining only guards against null/undefined — it does not swallow other errors, and it short-circuits the entire chain from that point, meaning any further property access or function calls after the failed link are skipped entirely, not just that one step. Combined with the nullish coalescing operator (`??`), you get `user?.address?.city ?? "Unknown"` to also supply a default value cleanly.
- Eliminates verbose manual null/undefined checks for nested property access
- Short-circuits the whole chain safely instead of throwing a TypeError
- Works for property access, method calls, and computed/array indexing
- Pairs naturally with nullish coalescing (??) to supply fallback defaults
AI Mentor Explanation
Optional chaining is like a scorer checking “does this player have a current innings, and if so, does that innings have a strike rate recorded” before reading the number, instead of assuming both exist and crashing the scoreboard software if either is missing. The moment either link is absent, the scorer simply reports “not available” and stops checking further, rather than digging deeper into data that is not there. This mirrors exactly how `player?.innings?.strikeRate` stops safely at the first missing link. It replaces a chain of manual “if this exists, then check the next” guards with a single compact operator.
Step-by-Step Explanation
Step 1
Identify a potentially missing link
Any point in a property chain where the value might be null or undefined.
Step 2
Insert the `?.` operator
Replace `.` with `?.` at that link: `obj?.prop`, `obj?.method?.()`, or `obj?.[key]`.
Step 3
Evaluation checks left-to-right
If the left side of `?.` is null/undefined, evaluation stops immediately and returns undefined.
Step 4
Combine with ?? for a default
`obj?.prop ?? "fallback"` supplies a clean default value when the chain resolves to undefined.
What Interviewer Expects
- Correct explanation of short-circuiting behavior on null/undefined
- Awareness that it works for property access, method calls, and array indexing
- Knowledge that it only guards against null/undefined, not other error types
- Mention of pairing it with the nullish coalescing operator (??) for defaults
Common Mistakes
- Believing optional chaining catches all runtime errors, not just null/undefined access
- Overusing `?.` everywhere, masking legitimate bugs where a value should never be missing
- Confusing `??` (nullish coalescing) with `||` when combining with optional chaining
- Not knowing `obj.method?.()` guards against the method itself being missing, not its arguments
Best Answer (HR Friendly)
“Optional chaining lets you safely read deeply nested data, like a user's address city, without your code crashing if some part of that path does not exist. Instead of a long chain of manual checks, you just add a question mark before each dot, and JavaScript automatically stops and returns undefined if anything along the way is missing.”
Code Example
const user = { profile: { address: null } }
// Before: verbose manual guards
const cityOld =
user && user.profile && user.profile.address && user.profile.address.city
// After: optional chaining
const city = user?.profile?.address?.city ?? 'Unknown'
console.log(city) // 'Unknown'
// Also works for methods and array access
user.profile.address?.validate?.() // only calls if validate exists
const first = user?.profile?.tags?.[0] // safe even if tags is undefinedFollow-up Questions
- How does optional chaining interact with the nullish coalescing operator?
- Does optional chaining short-circuit the entire expression or just one property access?
- What happens if you use `?.()` on a property that exists but is not a function?
- Why is `||` sometimes the wrong choice to pair with `?.` instead of `??`?
MCQ Practice
1. What does `user?.address?.city` return if `user.address` is undefined?
Optional chaining short-circuits and returns undefined instead of throwing when a link is missing.
2. Which syntax safely calls a method only if it exists?
`?.()` calls the function only if it is not null/undefined, otherwise the whole expression is undefined.
3. What does optional chaining NOT protect against?
Optional chaining only guards null/undefined access; it does not catch unrelated runtime errors.
Flash Cards
What does `?.` do? — Short-circuits to undefined if the left side is null or undefined, instead of throwing.
Syntax for optional method call? — obj?.method?.() — only calls if the method exists.
Common pairing operator? — Nullish coalescing (??) to supply a default value when the chain is undefined.
What does it NOT catch? — Any error unrelated to a null/undefined link, e.g. type errors from other logic.