Optional Chaining in Javascript

Though optional chaining has been around for a while in many programming languages, it just recently became available in Javascript with the release of ES2020. MDN Web Docs describes optional chaining as “a way to simplify accessing values through connected objects when it’s possible that a reference or function may be undefined or null.” Optional chaining is a super valuable tool that allows you to access deeply nested object properties without throwing an error if the property doesn’t exist. Either the property exists and can be accessed or it doesn’t exist and undefined will be returned instead. Before Javascript had optional chaining, the && operator was required to check if an object was undefined or null before accessing its properties.

const street = restaurant && restaurant.address && restaurant.address.street

What we’re doing here is saying, “Do we have restaurant? If so, do we have an address for that restaurant? If so what is the street of that address?” If there was no street for the restaurant, this would be returned as undefined. Before optional chaining, this was the most effective way to check if an object was undefined or null before accessing its properties.

const street = restaurant?.address?.street

This line of code using the optional chaining operator (?.) is equivalent to the above line of code using the && operator. If restaurant or address happen to be undefined or null, our code will simply be returned as undefined as opposed to the error we would get if it was written like this.

const street = restaurant.address.streetUncaught TypeError: Cannot read property 'street' of undefined

Optional chaining is a great tool for simplicity and readability. It has many uses and can even work with function calls. Just like before, these following two lines of code both work on an object that may or may not be defined and are essentially equivalent.

const tableCount = restaurant.getTableCount && restaurant.getTableCount()const tableCount = restaurant.getTableCount?.()

These lines of code both verify that the restaurant variable has a property called “getTableCount” before trying to call that function. If the function does exist it will be called, however if it does not exist it will just return undefined. Other than optionally chaining functions there is still one more helpful usage, optional chaining with arrays.

const firstRestaurant = array && array[0]const firstRestaurant = array?.[0]

Once again, the first line of code can be simplified into the second line of code using optional chaining. Here we want to access an element in an array using index, however first we want to make sure the array is defined. If the array is undefined, undefined will be returned instead of Javascript attempting to access the index of the array.

Optional chaining is a clean, dynamic, and readable way to prevent errors and access properties when we are not sure if the object is defined.

Sources:

Software Engineering Student at Flatiron School