Nullable nested data
Read deeply nested configuration or API data whose intermediate objects may be absent.
JS Puzzles · Const
Chained optional calls
Optional chaining safely accesses nested properties and optionally calls methods when an intermediate value may be null or undefined. A nullish value before ?. short-circuits the remaining chain and returns undefined.
How it works
Optional chaining places ?. at a property access, computed access, or function call that may be absent. If the value on its left is null or undefined, evaluation stops and the complete expression produces undefined; otherwise, the access or call proceeds normally.
Syntax
obj?.prop
obj?.[prop]
obj.method?.()Returns
The accessed value or function result when the chain succeeds; otherwise undefined when an optional link encounters null or undefined.
Key points
- A nullish value immediately before ?. ends the chain and yields undefined.
- When the base value exists, optional property access behaves like ordinary dot access.
- Use bracket form when the property name comes from an expression.
- An optional call skips invocation when the method is missing.
- Repeated optional links allow nested property traversal without separate null checks.
- Short-circuiting also prevents later calls and operations in the same chain.
Common mistakes
- Optional chaining does not make an undeclared identifier safe; referencing one still causes a ReferenceError.
- Every potentially missing link needs its own ?. marker; one optional access does not protect later ordinary accesses.
- Do not use it when absence should be treated as an error, because it silently converts the missing value into undefined.
Example: Safely access nested data and an optional method
const user = {
profile: {
getName() {
return "Ada";
}
}
};
const name = user?.profile?.getName?.();
const missing = user.settings?.theme;
console.log(name); // Ada
console.log(missing); // undefinedEach optional link checks the value immediately before it and stops the remaining chain when that value is nullish.
When to use it
Optional callbacks
Invoke an optional callback or method without first writing an explicit existence check.
Computed property access
Access a dynamically named property when the container itself may be missing.
Interview questions
QWhat does optional chaining do when the checked value is nullish?
It checks the value immediately to the left of ?. and stops if that value is null or undefined. The expression then evaluates to undefined instead of throwing for that optional step.
Follow-up: What happens with user?.profile.name? Only user is optional; if user exists but profile is nullish, .name is still unsafe.
QWhat are the three documented forms of optional chaining?
The property form is obj?.prop, the computed form is obj?.[prop], and the optional-call form is obj.method?.(). The call form invokes the method only when that property exists.
Follow-up: Why use method?.() rather than obj?.method()? The former checks whether the method is callable at that property; the latter first checks obj and then performs a normal property access.
QHow does short-circuiting affect chained evaluation?
Optional chaining short-circuits later work in the same chain when the left side is undefined or null. Function calls or other operations to its right are not performed after that short circuit.
Follow-up: What should be verified in code review? Ensure each potentially absent intermediate value has an optional marker and that silently returning undefined is acceptable.
Related
optional chainingnullish coalescing operatorproperty accessorsshort-circuit evaluation