How to Use the Optional Chaining in JavaScript

What is the optional chaining #

The optional chaining is a feature introduced with ES2020 that allows you to access properties of an object that doesn’t exist without throwing an error. It is convenient when you are not sure if a property exists or not, like when you are working with an API.

How to use the optional chaining #

Before this feature, you had to check if a property existed before accessing it. Here is an example of how we are used to do it:

const user = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    country: 'USA'
  }
}

if (user.address && user.address.country) {
  // Do somehing with the data.
}

It works, buttttt it is pretty lengthy. Meanwhile, using the optional chaining, you can do as follow:

if (user.address?.country) {
  // Do somehing with the data.
}

You may have noticed the ? right after the address property; using this operator will tell JavaScript to check if the address is defined before accessing the country property. In case of the address property doesn’t exist, this line will return undefined; so the condition will be false.

If you are wondering if you can use the optional chaining multiple times, the answer is yes! Here is an example:

if (user?.address?.country?.something_else) {
  // Do somehing with the data.
}

It may be exaggerated, but you got the idea.

Using the optional chaining with arrays and functions #

The optional chaining can be used with arrays and functions as well.

Here is an example of how to use it with arrays:

const names = ['Yohan'];

console.log(names[0]); // Yohan
console.log(names[1]); // undefined

const names = null;

console.log(names?.[0]); // undefined
console.log(names[1]); // an error will be thrown here

Using functions:

function sayHello(name) {
  console.log(`Hello ${name}`);
}

sayHello('Yohan'); // Hello Yohan
sayyHello('Yohan'); // an error will be thrown here
sayyHello?.('Yohan'); // will return undefined without throwing an error

Useful, right? 😁

I’m sure you are wondering if you can use the optional chaining right after calling a function. Yes, you can! Here is an example:

function getUser() {
  return {
    name: 'John',
    age: 30,
  }
}

console.log(getUser()?.name); // John
console.log(getUser()?.test); // undefined

Assigning a value to a property cause an error #

Assigning a value to a property using the optional chaining is impossible. Doing so will throw the following error: Invalid left-hand side in assignment.

Here is an example:

const user = {};

user?.name = 'John'; // Invalid left-hand side in assignment

Combining the optional chaining with the nullish coalescing operator (??) #

You can use this operator to assign a default value if undefined is returned by the optional chaining. Here is an example:

const user = {
  age: 30,
};
const name = user?.name ?? 'John';
const age = user?.age ?? 'Unknown age';

console.log(name); // John
console.log(age); // 30

Simple and elegant, right? 😁

Conclusion #

You learned what is the optional chaining, why it is powerful, and how it can help you protect your code from crashing.

Thank you for reading me. If you enjoyed this article and consider offering me a ☕, I will be very grateful, and it will help me write new articles.