Codectionary / Developer documentation / JavaScript

Optional Chaining & Nullish Coalescing

Optional chaining (?.) safely accesses deeply nested properties without throwing an error if an intermediate value is null or undefined - it short-circuits and returns undefined instead of crashing. Nullish coalescing (??) provides a default value only when the left side is specifically null or undefined, not for other falsy values like 0 or "".

Syntax

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

Examples

Optional Chaining for Nested Properties

Safely accessing deeply nested data that might not exist.

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

Optional Chaining with Methods and Arrays

Using ?. to safely call functions and access array indices that might not exist.

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

Combining with Nullish Coalescing

Providing a fallback value for safely-accessed data.

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

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

Specifications & further reading