Optional Chaining ?.
Reach deep into objects, arrays and method calls without a wall of && guards.
obj?.prop
obj?.[key]
fn?.(args)?. stops evaluating and returns undefined the instant it meets null or undefined, instead of throwing 'cannot read property of undefined'.
user?.address?.city // undefined if any link is missing
api?.fetch?.() // call only if fetch exists
rows?.[0]?.name // safe dynamic indexThree forms: property access ?.prop, dynamic access ?.[expr], and call ?.().
Pair it with ??
Optional chaining gives you undefined on a broken path; ?? turns that into a real default. Together they are the idiomatic safe-read: obj?.deep?.value ?? fallback.
Short-circuiting
Once a link is nullish the entire rest of the chain is skipped, including function calls, so no arguments are evaluated.
Example
When to use it
- Safely access a deeply nested address field from an API user object that may have a null profile.
- Call a method on an optional plugin object without throwing if the plugin was not loaded.
- Read an array element through optional chaining when the array itself may be absent.
More examples
Access nested property safely
Short-circuits at the first null or undefined in the chain, returning undefined instead of throwing.
const user = { profile: null };
const city = user?.profile?.address?.city;
console.log(city); // undefined – no TypeError thrownOptional method call
Uses ?. before a method call so it is skipped entirely when the object is null or undefined.
const plugin = null;
plugin?.init(); // safe – no error when plugin is null
const analytics = { track: (e) => console.log("Track:", e) };
analytics?.track("page_view"); // "Track: page_view"Optional array element access
Applies optional chaining to bracket notation to safely access an array index when the array may be null.
const data = null;
const first = data?.[0];
console.log(first); // undefined
const arr = [10, 20];
console.log(arr?.[1]); // 20
Discussion