Choosing Optional Chaining in JavaScript: When It Helps and When It Hides Bugs

The problem: fragile nested access

JavaScript developers frequently read values buried several levels deep in objects — think config.api.timeout or user.profile.settings.theme. A single null or undefined anywhere in the chain throws a TypeError, forcing us to litter code with guard clauses like if (config && config.api && config.api.timeout) …. The result is verbose, error‑prone, and hard to scan.

What optional chaining actually does

Introduced in ECMAScript 2020, the ?. operator short‑circuits an expression the moment it encounters a null or undefined value, yielding undefined instead of throwing. It works for property access (obj?.prop), bracket notation (arr?.[0]), and even function calls (fn?.()). The operator does not turn a primitive into an object; (null).foo?.bar still throws because the first dot tries to read a property on null.

Worked example: cleaning up a configuration loader

// Before optional chaining
function getTimeout(cfg) {
  if (cfg && cfg.api && typeof cfg.api.timeout === 'number') {
    return cfg.api.timeout;
  }
  return 5000; // default
}

// After optional chaining
function getTimeout(cfg) {
  return cfg?.api?.timeout ?? 5000;
}

The second version is a single expression. The ?? nullish‑coalescing operator supplies the default only when the chained result is null or undefined. Run the snippet in any modern browser console or Node ≥ 14 to verify that getTimeout(null) returns 5000 without throwing.

Trade‑off: readability vs. hidden bugs

• Pros: fewer lines, clearer intent, easier refactoring when the object shape changes.
• Cons: a missing intermediate value that should be considered a programming error (e.g., a required user.id) silently becomes undefined, potentially propagating a subtle bug downstream.

Use optional chaining for truly optional data — feature flags, user‑provided settings, third‑party payloads. Keep explicit checks for required fields so that a missing value surfaces early, either via a thrown error or a deliberate validation step.

Practical verification checklist

1. Run the example in your target runtime (browser devtools or node -e "…") to confirm short‑circuit behavior.
2. If you transpile with Babel, inspect the output of @babel/preset-env targeting ES5; you should see generated guard clauses equivalent to the manual && checks.
3. Add a lint rule (e.g., eslint: no-unneeded-optional-chain) to flag optional chains on paths that are known to be non‑nullable.

Closing guideline

Adopt optional chaining as the default for optional reads, but pair it with a team convention: any property that the domain model marks as required must be accessed without ?. and validated explicitly. This keeps code concise while preserving the safety net that catches genuine defects early.