Optional Chaining (?.) is a JavaScript operator that allows you to safely access deeply nested object properties without throwing an error if an intermediate property doesn’t exist. Instead of crashing your application, it gracefully returns undefined.

Think of it as a protective guard that checks each step of your property access path and says, “If anything here is null or undefined, I’ll stop and return undefined instead of causing an error.”

How Optional Chaining Works

When JavaScript encounters the ?. operator, it performs what’s called short-circuit evaluation. This means:

  1. JavaScript checks the value immediately before the ?.
  2. If that value is null or undefined, it immediately stops and returns undefined
  3. If that value exists, it continues to access whatever comes after the ?.

This happens at each step of your chain, making it safe to write expressions like user.contact?.phone without worrying about whether contact exists.

Understanding Nullish Values

In JavaScript, “nullish” specifically means null or undefined. This is different from “falsy” values like 0, “”, false, or NaN. The distinction is crucial because:

  • Falsy values are often valid data (like volume set to 0)
  • Nullish values represent the absence of any value

The Difference Between ?? and ||

This is where many developers get confused. The logical OR operator (||) returns the right-hand value when the left-hand value is falsy. The nullish coalescing operator (??) returns the right-hand value only when the left-hand value is nullish.

This means || will replace valid falsy values with your default, while ?? preserves them. When you’re setting defaults for missing data, you almost always want ?? because you only want to replace values that are truly absent, not values that happen to be false, zero, or empty.

When to Use Optional Chaining

  • APIs rarely return exactly what you expect. Fields might be missing, null, or undefined. Optional chaining lets you safely navigate through API responses without constant checking.

  • Form data, URL parameters, and other user-provided information often have unpredictable structures.

  • Applications often have complex configuration with optional sections. Optional chaining makes it easy to read these configurations safely.

  • Elements you’re looking for might not exist on the page. Optional chaining prevents those dreaded “cannot read property of null” errors.

When NOT to Use Optional Chaining

  • If your application absolutely needs certain data to function, optional chaining might hide underlying problems. Let the error happen so you know something’s wrong.

  • While optional chaining is fast, it does add conditional checks. In tight loops or performance-sensitive code, manual checks might be more appropriate.

  • If you’re working with objects you control and know the structure of, optional chaining is unnecessary overhead.

<
Previous Post
What Do You Actually Need to Grow Your Business?
>
Blog Archive
Archive of all previous blog posts