Optional chaining has been added to the ES2020 version of JavaScript and is also available in TypeScript.

Optional chaining is a warmly welcomed way to access child properties, even when they don't exist!

Let's sketch a simple user object.

const user = {
  firstName: 'Chris',
  lastName: 'Bongers',
  address: {
    street: 'Some street',
  },
};

Sometimes we can have a sub-object called shippingAddress, but it's not always required.

We could write code like this to check if it exists:

if (user.shippingAddress && user.shippingAddress.street) {
  console.log(user.shippingAddress.street);
}

However, that will quickly get out of control if we need multiple properties from this shipping address object.

So let's see how optional chaining can come to our rescue here:

console.log(user.shippingAddress?.street);

That will now return undefined, as it is undefined, but won't throw an error.

The way this works is that it actually will evaluate the left-hand side of the question mark. So in this example, it will evaluate if shipping exists or not.

Other ways of using optional chaining

It is pretty common to use optional chaining for object evaluation, but it can also be used in other forms.

One of these ways is the evaluate array-like calls so talking the example above, we could write code like this:

console.log(user.shippingAddress?.['street']);

This, in return, will evaluate on the same criteria but then call an array value instead of an object.

A third way of using optional chaining is to invoke functions but pass only if the object exists.

Let's say our shippingAddress object has a function called calculateShippingCost(), and we want to invoke that, but as you saw, sometimes, we don't even have the shipping address object.

Yes, that's another excellent use-case where optional chaining comes to our rescue.

user.shippingAddress?.calculateShippingCost();
// undefined

That, in turn, will return undefined again since the shipping address doesn't even exist.

Returning something better than undefined

Well, it's cool that we won't get errors anymore by calling properties of non-existing objects. Still, we rarely want to print out 'undefined', so let's see how we can use the JavaScript nullish coalescing operator to fix this issue.

For those who don't know, the nullish coalescing operator (??) is a logical operator.

It uses the following syntax:

evaluation ?? fallback;

Let's see it in action:

console.log(user.shippingAddress?.calculateShippingCost() ?? 'Free shipping');

What happens here is that we print out the calculate shipping function if the shipping address exists. However, if it doesn't, we return the fallback, which in this case prints out "Free shipping".

That's super helpful, right!

So what we learned today is that we can use optional chaining in JavaScript to evaluate if objects exist and to assess not them ourselves. As well as a way to return something more useful than undefined.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter