Frontend focused full stack enthusiast.
23 December 2019
If you spend much time writing JavaScript, the following may look familiar to you:
if (myObj && myObj.myProperty && myObj.myProperty.myCollection && myObj.myProperty.myCollection.length) {
// stuff happens here
}
And that example is a relatively tame one. Imagine that if myCollection exists, then we have to start looking for specific things within that array, and who knows how nested those could be. That’s just the reality of frontend development when we’re working with APIs. We can’t necessarily control what the response we may be working with will look like, nor can we guarantee that the response will always be there, so we must code defensively around it. It’s verbose, but it’s important.
So what if I told you that optional chaining has now reached stage 4, meaning that it will now be included with the JavaScript standard? This means that we could change the above statement into something like this:
if (myObj?.myProperty?.myCollection?.length) {
// stuff happens here
}
We can vastly simplify our code while still clearly signifying our intention and writing defensive code that won’t break down if we either get no response or get a response that does not look like what we expect.
Optional chaining is great for shortening defensive checks, but there are some caveats to it. It is important to not lose sight of what the intent of your conditionals actually is. Let’s say we have an example where on our response, if a specific property does not exist, then we do something.
if (!something?.exists) {
// give you all my money
}
This is an example of where we may not want to use optional chaining. In the case of both something being falsey or something.exists being falsey, either way this condition is being fulfilled. That means that if our request fails and we don’t get back a response, this condition would still be met.
This would be a specific use case where in order to not lose your intent, you should still write out your full conditions:
if (something && !something.exists) {
// give you all my money
}
This ensures that we only meet the condition and give money if something does exist at all, meaning that a breakdown in receiving a response and populating the value of something won’t cause us to unintentionally give money away. Do not lose sight of your intent and make sure that what you are chaining still behaves the way you would expect it to without chaining (or if you should avoid chaining in this case).
As of the time of writing, this is something that is still not enabled by default quite yet. It’s on its way and you can check the status here, but you’ll want to use a polyfill to get full support, especially if you need to support anything but the most modern browsers. Even with a polyfill required though, it’s a nice quality of life improvement for any JavaScript developer!