Optional Chaining & Nullish Coalescing

Syntax

obj?.prop?.nested
arr?.[index]
func?.()
value ?? defaultValue

Examples

const user = {
  name: "Alice",
  address: {
    city: "London"
  }
};

console.log(user?.address?.city);    // "London"
console.log(user?.address?.zipCode); // undefined - no error thrown
console.log(user?.contact?.email);   // undefined - "contact" does not exist, but no crash

// Without optional chaining, the line above would throw:
// TypeError: Cannot read properties of undefined

const user = { greet: null };
user.greet?.(); // does nothing - safely skips the call since greet is null

const data = { items: null };
console.log(data.items?.[0]); // undefined - safely handles the null array

const user = { address: null };

const city = user?.address?.city ?? "Unknown city";
console.log(city); // "Unknown city"

// Contrast with ||, which would also replace legitimate falsy values
const settings = { volume: 0 };
console.log(settings?.volume ?? 50); // 0 - correctly kept, since 0 is not null/undefined

Best practices

• Use optional chaining when accessing properties that might not exist, instead of manually checking each level with && chains
• Combine ?. with ?? to safely access a value and supply a sensible default in one expression
• Do not overuse optional chaining to mask bugs - if a property should always exist, a missing value might indicate a real problem worth investigating rather than silencing
• Remember ?. short-circuits the entire chain - if any part is null/undefined, the whole expression evaluates to undefined without evaluating further

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation