Optional Chaining in JavaScript(?.)

The Optional Chaining Operator denoted with a question mark and a dot (?.) is a feature introduced in JavaScript ES2020.

Decided to write about this operator because for a very long time I used to be very confused when I was going through code and saw it. Looks like the Ternary Operator but I could not just grasp its use until I started writing more advanced React.js code.

The Optional Chaining Operator is generally used to avoid the TypeError which occurs when we try to access the property of a non existent field in nested objects. The nested object could be data from an API. Anyone who has ever worked with a Rest API for instance, can attest to the nesting of data that goes on there. This Optional Chaining Operator creates more user-friendly errors.

A non existent field is undefined and as we know data types like undefined and null are primitive data types and one thing about primitives is that they don't have properties. Let us illustrate with code below.

const person={
name:'Steve',
address:{
city:'Abuja',
street:'5 garki lamido'
}

1. If we try to access person.name in the above code we get Steve as output.

console.log(person.name)

1. But if we try to access person.country:

console.log(person.country)

We get undefined above because we don't have a country field.

Now if we try to access person.country.name

console.log(person.country.name)

Recall from 2 we got undefined, then we tried to access undefined.name and we got a TypeError:cannot read properties of undefined. Primitives cannot have properties never forget that.

Bring in Mr Optional Chaining to mitigate against the TypeError which we are getting. So if we were to try

console.log(person.country?.name)

we get undefined as output.

Use With Methods

Suppose we try to access a method with the above code, as we can see there is no method in our person object so if we have a method called methodMan()

console.log(person.methodMan())

we would get an error message telling us it is not a function.

But if we were to do:

console.log(person.methodMan?.())

we would get undefined.

Note

We can use optional chaining multiple times in nested objects.

const building={
name:"better days ahead",
place:"school",
details:{
location:"mayfield way",
education:"basic"
}
}

let us try to access
building.founded.age.education

console.log(building.found.age.education)

we get a TypeError: cannot read properties of undefined.
Notice that we don't have found and age in our object
So let us do some Optional Chaining.

console.log(building.found ?.age?.education)

we get undefined

Conclusion

So we can see that the ?. operator is a very good error handling operator that can help generate user friendly errors when we are working on our applications.