Javascript Optional Chaining

If you prefer watching our video instead of reading the article, you can watch the video version of this article on our youtube channel:

In this article, we'll dive into an essential ES2020 feature: optional chaining in JavaScript. This feature simplifies working with deeply nested objects and reduces the likelihood of runtime errors. Let’s explore why optional chaining is so valuable and see how it can help us write cleaner, more readable code.

Part 1: The Problem

Imagine you have a deeply nested object representing a user's profile:

const user = {
  name: "John Doe",
  address: {
    street: "123 Main St",
    city: "New York",
    contact: {
      email: "john.doe@example.com"
    }
  }
};

Now, let's say you want to access the user's email address. In typical scenarios, you might use several && conditions to ensure each nested property exists:

const email = user && user.address && user.address.contact && user.address.contact.email;

This approach works, but it’s verbose, hard to read, and easy to mess up, especially when objects are more complex or when properties are missing.

Part 2: The Solution—Optional Chaining

With optional chaining, you can replace this cumbersome approach with a much simpler syntax:

const email = user?.address?.contact?.email;

If any of the properties in this chain do not exist, JavaScript will return undefined without throwing an error. This not only makes the code cleaner but also prevents issues like "cannot read property of undefined."

Practical Use Cases

Let’s consider a few examples where optional chaining can significantly streamline your code:

Optional Chaining with Arrays

Optional chaining can also be used to access array elements safely.

const users = [{ name: "Alice" }, { name: "Bob" }];
console.log(users?.[2]?.name); // Output: undefined (index 2 doesn't exist)

Invoking Functions Safely

Another use case is invoking methods that might not exist on an object:

const userFunctions = {
  sayHello: () => "Hello!"
};

console.log(userFunctions.sayHello?.()); // Output: "Hello!"
console.log(userFunctions.sayGoodbye?.()); // Output: undefined (no error)

Combining Optional Chaining with Nullish Coalescing

Optional chaining pairs perfectly with the nullish coalescing operator (??) to provide a fallback value when something is undefined or null.

const phoneNumber = user?.address?.contact?.phone ?? "No phone number provided";
console.log(phoneNumber); // Output: "No phone number provided"

Conclusion

And that’s it! Optional chaining is a simple yet powerful tool that can save you from countless runtime errors and reduce the amount of boilerplate code you write. By adopting this feature, you can make your code more elegant and robust. Try it out in your projects and see the difference it makes!