Optional Chaining in Javascript

July 14, 2025
5 min. read

This article explores optional chaining in JavaScript: what it is, how it works, and why it's a feature you should be using—along with a few words of caution.

Introduction #

For many JavaScript developers, one of the most frustrating and common errors is TypeError: Cannot read property '...' of undefined. This error typically occurs when you attempt to access a nested property on an object, but an intermediate property in the chain doesn't exist.

Traditionally, you would write defensive code using the logical AND (&&) operator to avoid this:

const user = {
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
};

// Checks if user exists, then if user.name exists
const firstName = user && user.name && user.name.firstName;

While this approach works, it's verbose and becomes cumbersome with deeply nested objects. This is where optional chaining (?.) comes in—a modern JavaScript feature that makes your code cleaner, safer, and far more readable.

What is Optional Chaining? #

Introduced in ES2020, the optional chaining operator (?.) lets you safely access deeply nested object properties without having to manually validate each level of the chain. If a reference in the chain is null or undefined, the expression automatically short-circuits and returns undefined instead of throwing a runtime error.

Let's refactor our previous example using optional chaining:

const user = {
  // The 'name' property is missing
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
};

// Since user.name is undefined, the expression returns undefined.
const firstName = user?.name?.firstName; // firstName is now undefined

As you can see, the result is the same as the logical AND version, but it's significantly more concise. If user or user.name is null or undefined, the expression gracefully resolves to undefined without crashing your application. It's then up to you to handle the undefined value as needed.

How It Works #

The optional chaining operator (?.) checks the value of the expression to its left. If the value is null or undefined, the evaluation stops immediately (short-circuits) and the entire expression returns undefined. If the value is anything else (including other "falsy" values like 0, '', or false), the evaluation continues to the next property in the chain.

More Than Just Object Properties #

Optional chaining is a versatile feature that also works with array elements and function calls.

Accessing Array Elements #

Ever tried to access an array element that might not exist? Optional chaining handles this seamlessly.

const users = [
  { name: 'Bob', posts: [{ title: 'Post 1' }] },
  { name: 'Charlie' }
];

const firstPostTitle = users?.[0]?.posts?.[0]?.title; // "Post 1"
const secondUserFirstPost = users?.[1]?.posts?.[0]?.title; // undefined

Calling Functions #

You can also use optional chaining to safely attempt to call a function that may not exist on an object. This is especially useful when working with APIs or objects where certain methods are optional.

const userWithMethod = {
  name: 'Dana',
  greet() {
    return `Hello, my name is ${this.name}`;
  }
};

const userWithoutMethod = {
  name: 'Eve'
};

const greeting1 = userWithMethod.greet?.();
// "Hello, my name is Dana"
const greeting2 = userWithoutMethod.greet?.();
// undefined

Combining with the Nullish Coalescing Operator #

Optional chaining pairs beautifully with the nullish coalescing operator (??). This operator lets you provide a default value when an expression resolves to null or undefined.

Let's combine them to provide a fallback value:

const user = {
  profile: {
    // A bio is not provided
  }
};

const userBio = user?.profile?.bio ?? 'No bio provided.';
// "No bio provided."

In this example, because user?.profile?.bio is undefined, the nullish coalescing operator kicks in and assigns our default string to userBio.

Don't Overuse It #

While optional chaining is a powerful tool, it should be used judiciously. It is designed for situations where a property is legitimately optional. If your application's logic dictates that a property should always exist, letting an error be thrown is often the correct behavior, as it immediately alerts you to an underlying data issue.

For instance, if every user in your system must have an id, you should access it directly (user.id) rather than with optional chaining (user?.id). An error in this case would correctly signal a data integrity problem that needs to be fixed.

Conclusion #

By incorporating optional chaining into your JavaScript toolkit, you can write code that is not only more concise and readable but also more resilient to an entire class of common errors. The next time you find yourself writing a long chain of && operators, remember the elegance and safety of ?.. Your future self — and your teammates — will thank you.

Javascript

Edit on Github