Using JavaScript’s Optional Chaining to Avoid Null‑Reference Errors

The problem: nested property access blows up

When you fetch data from an API, the shape of the response is often unknown or partially missing. A common pattern is to drill down into nested objects, for example user.address.street. If any intermediate value is null or undefined, the expression throws a TypeError and stops execution.

How optional chaining works

The optional chaining operator (?.) lets you read a property, call a function, or access an array element only when the left‑hand side is not null or undefined. If the left side is null or undefined, the whole chain short‑circuits and evaluates to undefined without evaluating the right side.

It works with three kinds of access:

• Property access: obj?.prop
• Function call: obj?.func?.()
• Array indexing: arr?.[0]

The ECMAScript 2020 specification (ECMA‑262 11th edition) defines this behavior in section 12.3.2.

Worked example: safe API response handling

Imagine a function that extracts a user’s street address from a JSON payload returned by /api/user. Using optional chaining you can avoid a cascade of if checks.

async function getUserStreet() {
  const response = await fetch('/api/user');
  const data = await response.json();
  // data may be { user: { address: { street: 'Main St' } } } or partially missing
  return data?.user?.address?.street; // undefined if any link is missing
}

// Usage
getUserStreet().then(street => {
  if (street !== undefined) {
    console.log('Street:', street);
  } else {
    console.log('Street information not available');
  }
});

If you run this in a modern browser console (Chrome 80+, Firefox 74+, Safari 13.1+), the function will return undefined when any part of the chain is missing, and no exception will be thrown.

Trade‑offs and limitations

• Browser support: Optional chaining is not natively available in Internet Explorer or very old browsers. For those targets you need a build step (e.g., Babel) that transpiles ?. into a series of logical AND checks.
• Masking bugs: Because the operator silently yields undefined, it can hide programming errors where a value unexpectedly becomes null. Use it only when the absence of a value is genuinely acceptable.
• Left‑hand side assignment: You cannot use optional chaining on the left side of an assignment; obj?.prop = value throws a SyntaxError. You must assign to a guaranteed‑existing reference or use a temporary variable.
• Function call safety: If the property exists but is not a function, the chain still attempts the call and results in a TypeError. Example: const x = { prop: 42 }; x?.prop(); // TypeError.

Actionable takeaway

Adopt optional chaining when you are dealing with data that may be partially missing and the absence of a value is a valid state. Pair it with lint rules (e.g., eslint-plugin-unicorn’s prefer-optional-chaining) to flag places where the operator can replace manual null checks. For legacy browser support, configure your transpiler to down‑level ?. to ES5, and verify the output in a tool like Babel REPL to ensure the generated code behaves as expected.