Optional Chaining in JavaScript

With JavaScript version ES2020, optional chaining (?.) was first introduced to help read the value of properties of nested properties of objects.

Let us consider the following example to understand why optional chaining is important, and how to use it.

movieTheatre object

In the snippet above, we have a movieTheatre object that has different opening and closing hours on different days of the week. Assuming we want to get the opening hours for Tuesday (tue), the following would be the output:

Reading an existing property

Let us assume we have data from a web API with multiple movie theatres, and not all of them open on the same day, and there is no way of knowing if the movie theatre declared above will open on Monday or not, and we would like to know what time the movie theatre above opens on a Monday. The following is how we would normally execute that operation.

Reading a non-existing property

We got the error above because movieTheatre.openingHours.mon is undefined.

Without optional chaining, we would avoid this error by running an if statement as follows:

Since the condition of the if statement is false, the code block of the if statement will not be executed.

In addition to the days of the week, if opening hours would be optional too, we would have to check for both opening hours and the day of the week as follows using an if statement as follows:

Since the condition of the if statement is false, its code block won’t be executed.

As you might have noticed, this might get messy pretty fast if we have deeply nested objects with a number of optional properties, which is the case most of the time.

With optional chaining, we can easily get rid of the messy solutions we have seen above using optional chaining as follows:

Reading a non-existing property using optional chaining

The output with using optional chaining is undefined, an not an error as we saw in the example above where we got an error message. The snippet above checks if the property to the left of the optional chaining operator (?) property exists (mon).

If we wanted to check if both opening hours and the day of the week that the movie theatre is open exist, we would use optional chaining as follows:

Reading 2 properties using optional chaining

If the property does not exist, undefined is returned immediately, and the rest of your code can be executed without returning an error as we saw in the earlier example. It is important to note that a property exists if it is not null and not undefined.

Let us look at a real world example. Consider the following:

Let us assume we want to loop over the days array and determine what days the movie theatre is open and closed. We can use a for of loop as follows:

Notice how we have not declared movieTheatre.openingHours.day, because day is not a property name of the movieTheatre object. If we want to use a variable name as the property name that is not in the movieTheatre object, we use the [] notation as shown in the snippet above.

In conclusion, optional chaining helps us prevent errors we might not expect. It is important to note that since this is a new feature, browsers that do not support ES2020 syntax might not work with optional chaining.