JavaScript Optional Chaining Guide

Optional chaining (?.) provides a safe way to access nested object properties without checking each level.

Basic Syntax#

const user = {
  name: 'John',
  address: {
    street: '123 Main St',
    city: 'Boston'
  }
};

// Without optional chaining
const city1 = user && user.address && user.address.city;

// With optional chaining
const city2 = user?.address?.city;
// 'Boston'

// When property doesn't exist
const user2 = { name: 'Jane' };
const city3 = user2?.address?.city;
// undefined (no error!)

Property Access#

const obj = {
  prop: {
    nested: {
      value: 42
    }
  }
};

// Deep property access
obj?.prop?.nested?.value;  // 42

// Missing intermediate property
const empty = {};
empty?.prop?.nested?.value;  // undefined

// Null or undefined
const nullObj = null;
nullObj?.prop;  // undefined

const undefinedObj = undefined;
undefinedObj?.prop;  // undefined

// Only stops on null/undefined
const objWithZero = { value: 0 };
objWithZero?.value;  // 0 (not undefined!)

const objWithEmpty = { value: '' };
objWithEmpty?.value;  // '' (not undefined!)

Method Calls#

const user = {
  name: 'John',
  greet() {
    return `Hello, ${this.name}`;
  }
};

// Call method if it exists
user.greet?.();  // 'Hello, John'

// Method doesn't exist
const user2 = { name: 'Jane' };
user2.greet?.();  // undefined (no error!)

// Chained method calls
const api = {
  data: {
    process() {
      return { id: 1 };
    }
  }
};

api?.data?.process?.();  // { id: 1 }
api?.missing?.process?.();  // undefined

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

calculator.add?.(2, 3);     // 5
calculator.subtract?.(2, 3); // undefined

Array Access#

const users = [
  { name: 'John', email: 'john@example.com' },
  { name: 'Jane' }
];

// Access array element properties
users?.[0]?.name;   // 'John'
users?.[0]?.email;  // 'john@example.com'
users?.[1]?.email;  // undefined
users?.[5]?.name;   // undefined

// Nested arrays
const data = {
  items: [
    { values: [1, 2, 3] }
  ]
};

data?.items?.[0]?.values?.[0];  // 1
data?.items?.[1]?.values?.[0];  // undefined

// Dynamic index
const index = 0;
users?.[index]?.name;  // 'John'

With Nullish Coalescing#

// Combine with ?? for default values
const user = { name: 'John' };

const city = user?.address?.city ?? 'Unknown';
// 'Unknown'

// Different from || for falsy values
const settings = { volume: 0, brightness: '' };

// || treats 0 and '' as falsy
settings?.volume || 100;     // 100 (wrong!)
settings?.brightness || 50;  // 50 (wrong!)

// ?? only checks null/undefined
settings?.volume ?? 100;     // 0 (correct!)
settings?.brightness ?? 50;  // '' (correct!)

// Nested with defaults
const config = {};
const port = config?.server?.port ?? 3000;
// 3000

Function Parameters#

function getNestedValue(obj) {
  return obj?.data?.values?.[0]?.name;
}

getNestedValue({ data: { values: [{ name: 'test' }] } });
// 'test'

getNestedValue({ data: {} });
// undefined

getNestedValue(null);
// undefined

// With destructuring
function processUser({ user } = {}) {
  const name = user?.profile?.name ?? 'Guest';
  return name;
}

processUser({ user: { profile: { name: 'John' } } });  // 'John'
processUser({ user: {} });  // 'Guest'
processUser({});  // 'Guest'
processUser();  // 'Guest'

Object Methods#

// Optional method on potentially undefined object
const response = {
  data: {
    json() {
      return { id: 1 };
    }
  }
};

response.data?.json?.();  // { id: 1 }
response.error?.json?.();  // undefined

// Callback execution
function fetchData(callback) {
  const data = { id: 1 };
  callback?.(data);  // Only calls if callback exists
}

fetchData(console.log);  // Logs { id: 1 }
fetchData();  // Does nothing, no error

Delete Operator#

const obj = {
  prop: {
    nested: 'value'
  }
};

// Delete with optional chaining
delete obj?.prop?.nested;  // true
console.log(obj.prop);  // {}

// Safe delete on missing property
delete obj?.missing?.prop;  // true (no error)

Short-Circuiting#

// Optional chaining short-circuits
const obj = null;
let called = false;

obj?.method(called = true);
console.log(called);  // false - never evaluated!

// Side effects won't run
let x = 0;
const data = null;
data?.[x++];
console.log(x);  // 0 - x++ never executed

// Function calls that would throw
const config = null;
config?.validate?.();  // undefined, no error

// Array methods
const list = null;
list?.map?.(x => x * 2);  // undefined
list?.filter?.(x => x > 0);  // undefined

Class Properties#

class User {
  constructor(data) {
    this.profile = data?.profile;
    this.settings = data?.settings;
  }

  getName() {
    return this.profile?.name ?? 'Anonymous';
  }

  getEmail() {
    return this.profile?.contact?.email;
  }
}

const user1 = new User({ profile: { name: 'John' } });
user1.getName();  // 'John'
user1.getEmail();  // undefined

const user2 = new User(null);
user2.getName();  // 'Anonymous'
user2.getEmail();  // undefined

API Response Handling#

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

    return {
      name: data?.user?.name ?? 'Unknown',
      email: data?.user?.email ?? 'N/A',
      avatar: data?.user?.profile?.avatar?.url,
      friends: data?.user?.friends?.map(f => f.name) ?? []
    };
  } catch (error) {
    return null;
  }
}

// Safe access to response data
async function getFirstPost(userId) {
  const response = await fetch(`/api/users/${userId}/posts`);
  const data = await response.json();

  return data?.posts?.[0]?.title ?? 'No posts';
}

Event Handling#

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

// React-style event handling
function handleClick(event) {
  const value = event?.target?.value;
  const dataset = event?.target?.dataset?.id;
  const parent = event?.target?.parentElement?.id;

  console.log({ value, dataset, parent });
}

// Optional callback execution
function Component({ onClick, onHover }) {
  return {
    handleClick: (e) => onClick?.(e),
    handleHover: (e) => onHover?.(e)
  };
}

Common Patterns#

// Safe JSON parsing
function safeJSONParse(str) {
  try {
    return JSON.parse(str);
  } catch {
    return null;
  }
}

const data = safeJSONParse(input)?.result?.value ?? defaultValue;

// Configuration access
const config = loadConfig();
const apiUrl = config?.api?.baseUrl ?? 'http://localhost:3000';
const timeout = config?.api?.timeout ?? 5000;

// Feature flags
const features = getFeatures();
const isEnabled = features?.newDashboard?.enabled ?? false;

// Nested form data
const formData = {
  user: {
    addresses: [{
      city: 'Boston'
    }]
  }
};

const city = formData?.user?.addresses?.[0]?.city ?? '';

When NOT to Use#

// Don't overuse for required properties
// If user is always required:
// ❌ user?.name (implies user might not exist)
// ✓ user.name (crashes if invariant violated)

// Don't use for error hiding
// ❌
try {
  const value = dangerousOperation()?.result;
} catch {
  // Hidden errors
}

// ✓
const result = dangerousOperation();
if (result) {
  const value = result.value;
}

// Don't chain unnecessarily
// ❌ obj?.foo?.bar?.baz when obj.foo.bar is always present
// ✓ obj.foo.bar?.baz when only baz might be missing

TypeScript Integration#

interface User {
  name: string;
  address?: {
    street?: string;
    city: string;
  };
}

function getCity(user: User | undefined): string {
  // TypeScript understands optional chaining
  return user?.address?.city ?? 'Unknown';
}

// Works with strict null checks
function processUser(user?: User) {
  const street = user?.address?.street;
  // street: string | undefined
}

Best Practices#

Use Optional Chaining When:
✓ Property might not exist
✓ Object might be null/undefined
✓ Accessing API response data
✓ Working with optional config

Combine With:
✓ Nullish coalescing (??) for defaults
✓ Try-catch for actual errors
✓ Type guards for type narrowing

Avoid:
✗ Hiding genuine errors
✗ Overusing on required properties
✗ Using || instead of ?? for defaults
✗ Excessive chaining depth

Performance:
✓ No significant overhead
✓ Short-circuits efficiently
✓ Same as manual null checks

Optional chaining (?.) simplifies safe property access and eliminates verbose null checks. Use it with nullish coalescing (??) for default values, but don't overuse it to hide errors or on properties that should always exist. It's perfect for API responses, configuration objects, and any data where properties might be missing.