Optional Chaining in Javascript

Optional chaining ? What ? You are saying I don’t need to chain my object again to check if it’s undefined or not ?

All I want is my banana, man.

That’s a glimpse of my reaction when I heard the terms “Optional Chaining”. TL;DR : Optional Chaining is a operator, that reduce the hassle to check object tree to all depth for undefined or null-ish value.

When you play with API, it’s often if you get these kind of result from the tree object that the API returns :

<script src=”https://gist.github.com/hilalarsa/0b31652b68b36c642881e41773c16a44.js”></script>

And say, you wanted to retrieve user name from the API object, you would do :

user.name

And if you wanted to retrieve user address postal billing info, you would do :

user.bankInfo.billingInfo.address.postal

And so on,

But here’s the catch, what if the API user is not reliable. There’s a case where user is allowed to fill in an optional field, and we could accidentally handled this value as “NULL” or worse, not provide any properties assigned to it at all.

There’s also possibilities that the same API returns different object tree for different parameter, say if I include :

API?bank_info=0

… the API will not return any bank info and stops the object tree at user info only. And what would happen if you still reads the object as example above ?

To create a robust and scalable apps, we need to handle corner case like this, so even a future change in the API cannot easily break the page.

So, what’s the solution ? Well it’s easy, you just gotta make sure when each time you access the object, it’s not null and not undefined. Small deal, let’s do it!

User name checker would be :

if(user && user.name){}

Easy, how about the second one ? :

if(user && 
user.bankInfo && 
user.bankInfo.billingInfo && 
user.bankInfo.billingInfo.address && user.bankInfo.billingInfo.address.postal){}

This will create similar pattern, where on each child steps, you need to check if each value is exist, not null, and not undefined. On the first case its seems fine, but repetition on child step check will be annoying, and possibly harm code readability.

I ran over the terms when I got similar problems, get annoyed, and decided to find if there’s possible solution to reduce this hassle. Then, I found the terms “Optional Checking”

So what is it and how does it work ?

Optional chaining is represented by the operator (?.) , and it functions similarly to the (.) that we use to de-structure object, but instead of causing error if the reference is null or undefined, it will short-circuit (send signal to stop the check) and return ‘undefined’ value.

So to get the postal code, you would simply use :

if(user.bankInfo?.billingInfo?.address?.postal){}

Simple right ? Cool enough, this will work with function call too. Say that you wanted to add handler to an API call that often ‘down’ and returns no value, you could do :

let dataFromAPI = callAPI.functionThatMayReturnUndefined?.();

This would return undefined value on the ‘dataFromAPI’ variable, instead of throws an error and break the app.

Awesome enough ? I myself can’t wait to use this operator on different corner case, and see if it’s actually helps. Nevertheless, it’s a cool feature and I felt good regret that I didn’t cover this operator as my basic knowledge on Javascript. That being said, have a good one!