JavaScript Optional Chaining Guide

Optional chaining (?.) safely accesses nested properties without explicit null checks. Here's how to use it.

Basic Syntax#

// Without optional chaining
const street = user && user.address && user.address.street;

// With optional chaining
const street = user?.address?.street;

// Returns undefined if any part is null/undefined
const user = null;
console.log(user?.name); // undefined (no error)

const user2 = { name: 'Alice' };
console.log(user2?.name); // 'Alice'

// Works with nested properties
const data = {
  user: {
    profile: {
      email: 'alice@example.com'
    }
  }
};

console.log(data?.user?.profile?.email); // 'alice@example.com'
console.log(data?.user?.settings?.theme); // undefined

Property Access#

// Object properties
const obj = { a: { b: { c: 1 } } };

obj?.a?.b?.c;    // 1
obj?.x?.y?.z;    // undefined

// Array elements
const arr = [1, 2, 3];
arr?.[0];        // 1
arr?.[10];       // undefined

const matrix = [[1, 2], [3, 4]];
matrix?.[0]?.[1]; // 2
matrix?.[5]?.[0]; // undefined

// Dynamic property access
const key = 'name';
const user = { name: 'Alice' };
user?.[key];     // 'Alice'

// Computed keys
const users = {
  'user-1': { name: 'Alice' },
  'user-2': { name: 'Bob' }
};

const id = 'user-1';
users?.[id]?.name; // 'Alice'

Method Calls#

// Call method if it exists
const obj = {
  greet() {
    return 'Hello!';
  }
};

obj.greet?.();    // 'Hello!'
obj.farewell?.(); // undefined (no error)

// With arguments
const calculator = {
  add(a, b) {
    return a + b;
  }
};

calculator.add?.(1, 2);      // 3
calculator.multiply?.(2, 3); // undefined

// Callback patterns
function fetchData(callback) {
  const data = { result: 'success' };
  callback?.(data); // Only calls if callback exists
}

fetchData(data => console.log(data)); // { result: 'success' }
fetchData(); // No error

// DOM methods
document.querySelector('.button')?.addEventListener('click', handler);

With Nullish Coalescing#

// Combine with ?? for defaults
const theme = user?.settings?.theme ?? 'light';

// Different from || which catches all falsy values
const count = data?.count ?? 0;
// Uses 0 only if count is null/undefined, not if count is 0

// Complex defaults
const config = {
  api: {
    timeout: 0 // Valid value of 0
  }
};

// Wrong: treats 0 as falsy
const timeout1 = config?.api?.timeout || 5000; // 5000

// Correct: only defaults on null/undefined
const timeout2 = config?.api?.timeout ?? 5000; // 0

// Chained with fallback
const value = obj?.prop1?.prop2 ?? obj?.fallback ?? 'default';

Short-Circuiting#

// Evaluation stops at first null/undefined
let callCount = 0;
function getValue() {
  callCount++;
  return { data: 'value' };
}

const result = null?.prop?.(getValue());
console.log(callCount); // 0 - getValue never called

// Useful for expensive operations
const cached = cache?.get(expensiveKey)?.value;
// If cache is null, expensiveKey isn't evaluated

// Side effects are skipped
let logged = false;
const obj = null;
obj?.method?.(logged = true);
console.log(logged); // false

Common Patterns#

// API response handling
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();

  return {
    name: data?.user?.name ?? 'Unknown',
    email: data?.user?.email ?? '',
    avatar: data?.user?.profile?.avatar ?? '/default-avatar.png',
    role: data?.user?.permissions?.role ?? 'guest',
  };
}

// Event handling
function handleEvent(event) {
  const target = event?.target;
  const value = target?.value ?? '';
  const dataset = target?.dataset?.id;

  // Process...
}

// Configuration merging
function getConfig(options) {
  return {
    host: options?.host ?? 'localhost',
    port: options?.port ?? 3000,
    ssl: options?.security?.ssl ?? false,
    timeout: options?.network?.timeout ?? 5000,
  };
}

getConfig(); // Uses all defaults
getConfig({ port: 8080 }); // Overrides port only

// React component props
function UserCard({ user }) {
  return (
    <div>
      <h2>{user?.name ?? 'Anonymous'}</h2>
      <p>{user?.bio?.short ?? 'No bio available'}</p>
      <img src={user?.avatar?.url ?? '/placeholder.png'} />
    </div>
  );
}

Array Methods#

// Safe array operations
const users = null;

// Without optional chaining
const names1 = users ? users.map(u => u.name) : [];

// With optional chaining
const names2 = users?.map(u => u.name) ?? [];

// First element
const first = arr?.[0];

// Last element
const last = arr?.[arr?.length - 1];

// Find with optional chaining
const found = users?.find(u => u.id === id)?.name;

// Filter and map
const active = users
  ?.filter(u => u?.active)
  ?.map(u => u?.email)
  ?? [];

// Reduce with fallback
const total = items
  ?.reduce((sum, item) => sum + (item?.price ?? 0), 0)
  ?? 0;

With Delete#

// Delete optional property
delete obj?.prop; // Safe even if obj is null

// Conditional delete
const config = {
  cache: { enabled: true }
};

delete config?.cache?.enabled; // Works
delete config?.missing?.prop;   // No error

TypeScript Integration#

// TypeScript understands optional chaining
interface User {
  name: string;
  address?: {
    street?: string;
    city: string;
  };
}

function getStreet(user: User | null): string | undefined {
  return user?.address?.street;
}

// With type narrowing
function processUser(user: User | null) {
  const city = user?.address?.city;
  // city is string | undefined

  if (user?.address) {
    // user.address is defined here
    console.log(user.address.city);
  }
}

// Non-null assertion (use carefully)
const definitelyCity = user?.address?.city!;

Best Practices#

Usage:
✓ Use for potentially missing properties
✓ Combine with ?? for defaults
✓ Use in API response handling
✓ Safe event handler access

Patterns:
✓ Chain multiple levels safely
✓ Use with array access
✓ Safe method calls
✓ Configuration access

Readability:
✓ Don't overuse on known objects
✓ Consider extracting complex chains
✓ Document expected structures
✓ Use TypeScript for clarity

Avoid:
✗ Using when value is required
✗ Excessive chaining (code smell)
✗ Hiding bugs in data structure
✗ Using || instead of ??

Optional chaining simplifies safe property access and eliminates verbose null checks. Combine with nullish coalescing (??) for default values. Use it for API responses, configuration objects, and any situation where properties may be undefined. Remember that it short-circuits evaluation when encountering null or undefined.