Introduction
In this article, we are going to learn about optional chaining and how they are helpful. But before moving ahead, let’s understand what exactly is this optional chaining.
This is a recent addition to the javascript language. In the absence of intermediate properties, nested object properties can be easily accessed by this optional chaining. Earlier the work was performed by polyfills. Sounds confusing, right!!. Let’s understand it in more detail.
Source: Giphy
The “non-existing property” problem
If you are just a beginner and started learning javascript, then the problem might not have knocked on your door yet. But to be honest. This is a very common problem faced by almost every second developer.
Let’s say we have a user object which is containing various information about the users.
Mostly the details are contained in the user.address property. Along with the street user.address.they do not provide street, but some. In such cases where the user has no address present,, and we try to get the user.address.street, we end up getting an error.
|
<!DOCTYPE html> <script> "use strict"; let user = {}; // a user without "address" property alert(user.address.street); // Error! </script> |
Here, the user.address is not defined, so an attempt to get user.address.street will give an error. In a practical scenario, such a scenario is termed as undefined meaning “no street.”
Let’s take another example…
|
<!DOCTYPE html> <script> "use strict"; // When there is no element, document.querySelector('.elem') is null. let html = document.querySelector('.elem').innerHTML; // error if it's null </script> |
Here, since the element doesn’t exist, on calling the .innerHTML, we will be getting an error. Now, if the absence of the element is quite normal, we will be avoiding the error and just accept HTML=null as a result. But how??
Let’s find that out.
The naive approach to receive this is to verify the value using the if or the conditional operator? Before its property is accessed. The syntax for the same is:
|
let user = {}; alert(user.address ? user.address.street : undefined); |
This works, giving no error. But this way of doing it is not worthy enough as the “user.address” appears twice in the code.
Now, let’s try getting user.address.street.name and for getting both the things we need to check user.address as well as user.address.street.
|
let user = {}; // user has no address alert(user.address ? user.address.street ? user.address.street.name : null : null); |
Another way of writing this code is using && operator.
|
<!DOCTYPE html> <script> "use strict"; let user = {}; // user has no address alert( user.address && user.address.street && user.address.street.name ); // undefined (no error) </script> |
Output:
The presence of a whole path to the property checks that all components exist. It’s clear from the code that the property names are still duplicated. Let’s say the user.address, its appearing three times in the code. Hence, to avoid these duplication parts, optional chaining was introduced into the picture.
84+ registered