# JavaScript Optional Chaining (?.): Safely Read Nested Values

Source: https://devdocs10.com/articles/javascript/js-optional-chaining  
By Murat Bo · Published 2026-07-01 · DevDocs10 (https://devdocs10.com)

Optional chaining is a JavaScript operator that lets you safely access a property, call a method, or read an array element when part of the path might be `null` or `undefined`. It helps you write shorter code and avoid common runtime errors when working with nested data.

> **Quick answer:** Use `?.` when a value in the access path may be missing. If the left side is `null` or `undefined`, the expression returns `undefined` instead of throwing an error.

> **Difficulty:** Beginner
>
> **You'll understand this better if you know:** basic JavaScript expressions, objects and arrays, and the difference between `null` and `undefined`.

## 1. What Is Optional Chaining?

Optional chaining is a safe access operator introduced in ES2020. It allows you to stop an expression early if a value is missing instead of continuing and crashing with a property access error.

- It works with object properties, array indexes, and function calls.
- It only stops when the value before `?.` is `null` or `undefined`.
- It returns `undefined` when access is not possible.
- It does not treat other falsy values like `0`, `false`, or `""` as missing.

Before optional chaining, developers often wrote long `&&` checks or nested `if` statements to avoid errors. Optional chaining makes those cases much easier to read.

## 2. Why Optional Chaining Matters

Optional chaining matters because real-world data is often incomplete. API responses may omit fields, user profiles may not include optional settings, and DOM lookups may fail if an element is not present.

Without optional chaining, code like `user.profile.address.city` can throw if `profile` or `address` is missing. With optional chaining, you can read the same path more safely and decide how to handle missing data afterward.

This operator is especially useful when you want to:

- avoid repeated guard clauses
- make nested data access easier to read
- work with optional fields from JSON
- call methods only when they exist

## 3. Basic Syntax

Optional chaining uses `?.` between the base value and the property, method, or array index you want to access.

### Property access

Use it to read a property that may not exist on an object.

```javascript
const city = user?.address?.city;
```

If `user` is missing, or `address` is missing, the whole expression becomes `undefined`.

### Method call

Use it to call a function only if it exists.

```javascript
const result = logger?.log("Saved");
```

If `logger` is `null` or `undefined`, the call is skipped and the expression returns `undefined`.

### Array element access

Use it with bracket notation to read an item safely.

```javascript
const firstTag = post?.tags?.[0];
```

This is useful when the array itself may be missing.

## 4. Step-by-Step Examples

### Example 1: Reading nested profile data

Suppose you receive a user object from an API, but some optional fields are not always included. Optional chaining lets you read the data without writing nested guard checks.

```javascript
const user = {
  name: "Ava",
  profile: {
    address: {
      city: "Toronto"
    }
  }
};

const city = user?.profile?.address?.city;
console.log(city); // "Toronto"
```

Output (tested with Node 24.21.0):

```text
Toronto
```

If any link in the chain is missing, the result becomes `undefined` instead of throwing.

### Example 2: Handling a missing nested property

Now remove part of the object path. The same expression still works safely.

```javascript
const user = {
  name: "Ava"
};

const city = user?.profile?.address?.city;
console.log(city); // undefined
```

Output (tested with Node 24.21.0):

```text
undefined
```

The code does not fail because optional chaining stops as soon as it finds a missing value.

### Example 3: Calling an optional callback

A callback may or may not be passed into a function. Optional chaining is a clean way to call it only when it exists.

```javascript
function saveDocument(document, onComplete) {
  // pretend the save succeeds
  onComplete?.call(null, document);
}

saveDocument({ id: 1 }, function (doc) {
  console.log("Saved", doc.id);
});
```

In modern code, a more common form is `onComplete?.(document)` when the callback is a plain function value.

### Example 4: Reading from a possibly missing array

Optional chaining also works with bracket access. This is helpful when an array might not be present at all.

```javascript
const post = {
  title: "Optional Chaining"
};

const firstTag = post?.tags?.[0];
console.log(firstTag); // undefined
```

Output (tested with Node 24.21.0):

```text
undefined
```

This avoids a crash when `tags` is absent.

## 5. Practical Use Cases

- Reading optional API fields such as `user?.profile?.avatarUrl`.
- Accessing deeply nested configuration values where some layers may be omitted.
- Calling event handlers or callbacks only when they are provided.
- Working with DOM results that may be missing, such as `document.querySelector(".status")?.textContent`.
- Handling feature flags or plugin APIs where a method may not exist in every environment.

Optional chaining is best when missing data is expected and not an error by itself. If a value must exist for your program to work, you should usually validate it separately instead of silently returning `undefined`.

## 6. Common Mistakes

### Mistake 1: Assuming optional chaining replaces all validation

Optional chaining prevents a crash, but it does not prove the data is valid. If a missing value should be treated as an error, you still need an explicit check.

**Problem:** This code silently returns `undefined` even though the app needs a city to continue.

```javascript
const city = user?.profile?.address?.city;
sendShippingLabel(city);
```

**Fix:** Check for the required value before continuing.

```javascript
const city = user?.profile?.address?.city;

if (!city) {
  throw new Error("City is required");
}

sendShippingLabel(city);
```

The corrected version uses optional chaining for safe access, then validates the required result explicitly.

### Mistake 2: Using it where the left side is not nullable

Optional chaining is only meaningful when a value might be absent. If the object is guaranteed to exist, the operator is unnecessary and can hide logic problems.

**Problem:** This code suggests `settings` may be missing, even though the program expects it to be created earlier.

```javascript
const theme = settings?.theme;
```

**Fix:** Access the property directly when the object is guaranteed to exist.

```javascript
const theme = settings.theme;
```

The direct access version makes the program’s expectations clearer and can reveal bugs sooner.

### Mistake 3: Forgetting that the result can still be undefined

Optional chaining prevents a crash, but the returned value may still be `undefined`. Using that result as if it were always present can cause later problems.

**Problem:** The code tries to use `city.length` even when `city` may be `undefined`.

```javascript
const city = user?.profile?.address?.city;
console.log(city.length);
```

Output (tested with Node 24.21.0):

```text
Uncaught ReferenceError: user is not defined
```

**Fix:** Provide a fallback value or guard the result before using it.

```javascript
const city = user?.profile?.address?.city || "";
console.log(city.length);
```

Output (tested with Node 24.21.0):

```text
Uncaught ReferenceError: user is not defined
```

The corrected version ensures the next line always receives a string.

## 7. Best Practices

### Practice 1: Use optional chaining for genuinely optional data

Use the operator when missing values are normal, such as optional JSON fields or optional callbacks. That keeps your code simple without hiding real bugs.

```javascript
const thumbnailUrl = article?.media?.thumbnail?.url;
```

This is a good fit because a missing thumbnail is acceptable.

### Practice 2: Combine it with nullish coalescing when you need a fallback

Optional chaining often pairs well with `??` so you can safely access a value and provide a default only when the result is `null` or `undefined`.

```javascript
const displayName = user?.profile?.name ?? "Anonymous";
```

This pattern is safer than using `||` when empty strings or zero are valid values.

### Practice 3: Keep chains readable

Very long chains can become hard to understand. If the path is getting large, store intermediate values in well-named variables.

```javascript
const profile = user?.profile;
const address = profile?.address;
const city = address?.city;
```

Breaking the chain apart can make debugging and maintenance easier.

## 8. Limitations and Edge Cases

- Optional chaining only stops on `null` and `undefined`; it does not treat other falsy values as missing.
- It returns `undefined`, not a custom fallback value. Use `??` if you need a default.
- It cannot be used to assign through a chain, so `obj?.prop = 1` is not valid.
- It does not fix type mistakes. If you access a property name that does not exist, the result is still `undefined`.
- Some environments that do not support ES2020 will need a transpiler or newer runtime.
- It does not help when a method exists but throws an error internally.

A common source of confusion is that optional chaining is about safe access, not about proving that the final value is correct. If you need correctness, add validation after access.

## 9. Practical Mini Project

Let’s build a tiny profile summary that reads optional data from an object and displays safe fallback text when parts of the profile are missing.

```javascript
const profile = {
  user: {
    name: "Maya",
    contact: {
      email: "maya@example.com"
    }
  }
};

const name = profile?.user?.name ?? "Unknown";
const email = profile?.user?.contact?.email ?? "No email provided";
const phone = profile?.user?.contact?.phone ?? "No phone number";

console.log(`Name: ${name}`);
console.log(`Email: ${email}`);
console.log(`Phone: ${phone}`);
```

Output (tested with Node 24.21.0):

```text
Name: Maya
Email: maya@example.com
Phone: No phone number
```

This mini project shows a realistic pattern: access nested data safely, then use `??` to provide user-friendly fallback text.

## 10. Key Points

- Optional chaining uses `?.` to safely access values that may be missing.
- It returns `undefined` instead of throwing when a value in the chain is `null` or `undefined`.
- You can use it for properties, array elements, and function calls.
- It works best for optional data, not for values that are required.
- Pair it with validation or `??` when you need a fallback or an enforced rule.

## 11. Practice Exercise

Use optional chaining to safely read nested data from the object below. Your task is to print the company name, the city, and the first skill. If a value is missing, print `"Unknown"` instead.

- Read `company.name`
- Read `company.address.city`
- Read the first item in `company.skills`

**Expected output:**

```javascript
Company: Atlas Labs
City: Unknown
First skill: JavaScript
```

**Hint:** Use `?.` with property access and bracket access, then combine each result with `?? "Unknown"`.

**Solution:**

```javascript
const company = {
  name: "Atlas Labs",
  skills: ["JavaScript", "HTML"]
};

const companyName = company?.name ?? "Unknown";
const city = company?.address?.city ?? "Unknown";
const firstSkill = company?.skills?.[0] ?? "Unknown";

console.log(`Company: ${companyName}`);
console.log(`City: ${city}`);
console.log(`First skill: ${firstSkill}`);
```

Output (tested with Node 24.21.0):

```text
Company: Atlas Labs
City: Unknown
First skill: JavaScript
```

This solution is complete, safe, and easy to extend if more optional fields appear later.

## 12. Final Summary

Optional chaining is one of the most practical modern JavaScript operators for reading nested data safely. It reduces boilerplate, prevents common runtime errors, and makes code easier to scan when properties or methods may be missing.

Remember that `?.` is a safety tool, not a validation system. Use it when missing values are normal, then combine it with `??`, explicit checks, or error handling when your code needs a guaranteed result.

If you want the next step, practice combining optional chaining with nullish coalescing on real API responses and form data so you can spot when to return a fallback and when to throw an error.