Suggest an edit

Improve this article

Refine the answer for “Optional chaining operator”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Optional chaining (**`?.`**)** is a modern operator (ES2020)
that lets you **safely access object properties**,
even when part of the chain is `undefined` or `null`.

---

## The problem without optional chaining

Say we have a nested object:

```javascript
const user = {
  profile: {
    name: 'Oleh'
  }
};
```

If we try to access a field that does not exist:

```javascript
console.log(user.address.city); // TypeError: Cannot read properties of undefined
```

> The error occurs because `user.address` is `undefined`,
> and trying to access `undefined.city` breaks the code.

---

## The solution: the `?.` operator

```javascript
console.log(user.address?.city); // undefined (no error)
```

> If the value **before** `?.` **exists**, the property is returned.
> If it is `undefined` **or** `null`, `undefined` is returned and the program does not crash.

---

## How the syntax works

### 1. Accessing properties

```javascript
user?.profile?.name   // "Oleh"
user?.address?.city   // undefined
```

### 2. Accessing methods

```javascript
user.sayHi?.(); // calls the method, if it exists
```

### 3. Accessing array elements

```javascript
const arr = null;
console.log(arr?.[0]); // undefined (no error)
```

---

## Example with API data

```javascript
const response = {
  user: { name: 'Oleh', address: null }
};

console.log(response.user?.address?.city); // undefined
```

Without `?.` you would have to write long checks:

```javascript
response && response.user && response.user.address && response.user.address.city
```

---

## Optional chaining + nullish coalescing

They are often used together:

```javascript
const city = user.address?.city ?? 'Not specified';
console.log(city); // "Not specified"
```

> `?.` safely accesses the property.
> `??` sets a default value if the result is `undefined` or `null`.

---

## What it does under the hood

```javascript
obj?.prop
// is equivalent to:
obj == null ? undefined : obj.prop
```

---

## Where it can be applied

| Situation | Example | Result |
|---|---|---|
| Object property | `user?.name` | `'Oleh'` or `undefined` |
| Nested objects | `user?.address?.city` | safe |
| Method call | `user.method?.()` | is called if the method exists |
| Array element | `arr?.[0]` | the first element or `undefined` |

---

## What you cannot use it for

```javascript
// cannot be used on the left side of an assignment
user?.name = 'Alex'; // SyntaxError

// will not work for existence checks (always undefined, not false)
if (user?.missing) ...
```

---

## Summary

| What it does | How it works |
|---|---|
| **Optional chaining (**`?.`**)** | Safely accesses a property without throwing an error |
| **Returns** | `undefined` if it encounters `null` or `undefined` |
| **Used** | when accessing nested properties, methods, and elements |
| **Combines** | often with `??` for default values |

---

## In short

> `obj?.prop`: will not crash if `obj` is `null` or `undefined`
> `obj?.method?.()`: calls the method, if it exists
> `arr?.[0]`: safe access to an element
> Works great together with `??`

Markdown · drag & drop images · ⌘B / ⌘I shortcuts477 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.