ReviseAlgo Logo

ES6+ Modern JavaScript

Optional Chaining (?.)

Master optional chaining in JavaScript. Learn safe deep object navigation, method execution, and array item access without throwing runtime errors.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

In JavaScript, attempting to read a property of null or undefined throws a runtime TypeError. The Optional Chaining operator (?.) provides a safe way to read nested properties without needing to write verbose checks.

2. Why It Matters

When working with complex, dynamic data (like API responses or configuration objects), properties can be missing or null. Using optional chaining keeps code clean by replacing verbose logical AND checks (&&) with a single operator.

3. Real-World Analogy

Think of a Warehouse Logistics Delivery Check:

  • Traditional Check (&& Operator): Before opening Box B, you must verify: "Does the warehouse exist? Yes. Is Box A inside the warehouse? Yes. Is Box B inside Box A? Yes." If you skip a check, the system fails.
  • Optional Chaining (Safe scanner): A scanner that scans the box: "Find Box B inside Box A inside the warehouse." If any item in the chain is missing, the scanner returns undefined immediately, instead of crashing.

4. Optional Chaining Syntax

The optional chaining operator (?.) short-circuits the expression, returning undefined if the reference before the operator is nullish (null or undefined):

1. Property Access:

2. Method Execution:

Call a method only if it exists on the object.

3. Array Brackets:

Read elements from an array or dynamic object keys safely.

5. Practical Example

This script demonstrates navigating nested API response properties and setting fallback defaults using the nullish coalescing operator:

6. Common Mistakes

  • Using optional chaining on the left-hand side of assignments: You cannot write to properties using optional chaining. Writing user?.name = 'Bob' throws a SyntaxError.
  • Assuming optional chaining prevents errors on root objects: The root object reference itself must be declared. Calling missingRoot?.property throws a ReferenceError if the variable missingRoot was never declared.

7. Quick Quiz

Q1: What does user.profile?.address return if user.profile is null?

A) It throws a TypeError

B) undefined

Answer: B — The optional chaining operator short-circuits the expression if it encounters a nullish value, returning undefined immediately.

8. Scenario-Based Challenge

The Dynamic Plugin Execution Hook:

An application runs dynamic plugins: plugin. Some plugins implement an optional callback method: onRender(data). To prevent crashes, you must check if both the plugin object and its onRender method exist before calling it. Write the execution call using optional chaining.

9. Debugging Exercise

Explain why this method call throws a TypeError, and how to fix it:

const config = {
  db: {
    connect: 'not-a-function' // String property, not a method!
  }
};

// Objective: call connect safely if available
config.db?.connect?.(); // throws TypeError: config.db.connect is not a function! Why?
View Solution

Diagnosis: The property connect exists but is a string, not a function. Since the property is defined and not nullish, the optional chaining operator allows the call to proceed, throwing a TypeError when it tries to invoke the string as a function.

Fix: Optional chaining only checks if the reference before the operator is nullish. It does not check the property's data type. To call the method safely, check its type using typeof first:

if (typeof config.db?.connect === 'function') {
  config.db.connect();
}

10. Interview Questions

🟢 Q1: Explain how optional chaining works and what values cause it to short-circuit.

Answer: The optional chaining operator (?.) checks if the reference before the operator is nullish (null or undefined).
• If the value is null or undefined, it short-circuits the expression and returns undefined immediately.
• If the value is defined (including falsy values like false, 0, or empty strings ""), the expression continues evaluating.

11. Production Considerations

  • • Do Not Abuse Optional Chaining: Avoid using optional chaining on properties that are guaranteed to exist. Overusing it can hide programming errors (like querying the wrong keys) and make debugging more difficult.