const street = person && person.address && person.address.street
What Is Optional Chaining
const name = person?.name
In the above code we have a variable
person which may or may not be null/undefined. Because we do not know if
person is defined we cannot directly access the
name property since if
person is undefined we would get the following error.
Uncaught TypeError: Cannot read property 'name' of undefined
By using the optional chaining operator (
?.), though, we are able to write our code as if we are directly accessing
person is undefined our code will just return undefined instead of throwing an error. Essentially the code above is the same as the following code.
const name = person == null ? undefined : person.name
The optional chaining operator is checking the
person variable to ensure it is defined before access the
name property and if it is not defined it will just return undefined. This means we can write the original code for getting the street as follows.
const street = person?.address?.street
Optional Chaining Functions
The first big additional use case for optional chaining is doing optional chaining with function calls. Let’s first look at some code for calling a function on an object that may not be defined.
const windowCount = house.getWindowCount && house.getWindowCount()
This code is essentially checking the
house variable to ensure it has a property called
getWindowCount before trying to call that function. This code is obviously pretty clunky and difficult to read which is where the optional chaining operator comes in.
const windowCount = house.getWindowCount?.()
Now at first it may seem weird to have a period (
.) before the function parenthesis, but that is because the optional chaining operator is a question mark followed by a period (
?.) and not just a question mark. This new code that uses the optional chaining operator will now check if there is a function defined on the
house variable called
getWindowCount and if it exists it will call it. If that function does not exist on the
Optional Chaining Arrays
The last main way that optional chaining can be used is with arrays. If you want to access an element in an array by index, but are not sure if the array is defined then you need to use code that looks something like this.
const firstElement = arr && arr
By using the optional chaining operator this code can be simplified to the following.
const firstElement = arr?.
Again this probably looks weird with a period (
.) before the brackets for accessing an array element, but it is just part of the syntax for the optional chaining operator. This new code will work by first checking if the
arr variable is defined and if it is it will attempt to access the index of the array specified. If the
arr variable is not defined then undefined will be returned instead of trying to access the index of the array.
This bracket notation optional chaining can also be used with objects as well.
const name = person?.['name']
This is really useful if you want to dynamically access a property of an object based on a string and are not sure if the object is defined.