Web development and Tech news Blog site. WEBISFREE.com

HOME > js

[Javascript] Understanding ES2020 Optional Chaining Operator

Last Modified : 03 Mar, 2023 / Created : 04 Mar, 2023
592
View Count
Let's learn about Optional chaining, which was introduced in ES 2020, one of the ECMAScript standards that has become the standard for JavaScript.





# ES2020 Optional Chanaing operator


Among the various features added after ES6, Optional chaining is considered to be a very useful and highly preferred one. As the name suggests, Optional chaining is an operator that selectively performs chaining on objects. Simply put, it allows you to use a value depending on the existence of properties that an object has.

To explain this, let's create an object called myObj and see how it works.
myObj = {
  a: {
    aa: 1
  }
}


yourNum = myObj.a.aa

// Result
1

Looking at the above code, the object myObj has a property a and also has an object { aa: 1 } as its value. Below, we created a new variable yourNum and assigned the value of myObj.a.aa to it. When we checked the result, it worked properly without any errors.

"If the values of a or aa do not exist within myObj, what happens?"



However, depending on the situation, the properties of an object may not exist. That is, if the values are obtained through a server API, it may not always be known if the properties exist. If the value is actually non-existent, an error will occur as follows...
yourObj = myObj.a.aa

// Error occurred
VM576:1 Uncaught TypeError: Cannot read properties of undefined (reading 'aa') at <anonymous>:1:17 (anonymous)



@ The solutions that have been frequently used
Various methods that are cumbersome and impair readability have been used to solve this kind of problem ~ I have seen and written a lot of codes like the ones used below...
if ('a' in myObj) {
  if ('aa' in myObj.a) {
    yourNum = myObj.a.aa
  }
}

Or ...
if (myObj.hasOwnProperty('a')) {
  // Execute only if it has a property 'a'
  ...
}

Or you could also use it like this.
yourNum = myObj.a && myObj.a.aa

Ultimately, these are the processes of checking for the existence of properties within an object to prevent errors from occurring. In addition to the above methods, you can also use Lodash methods. If you use _.get(), you can write code like the following.
yourNum = _.get(myObj, 'a.aa')

The discussion has become too long... Now, let's see how the above code changes with the use of Optional Chaining.


! Example of Optional Chaining


Using Optional Chaining in the above code is very simple. All you have to do is add a ? after the object's property. That is, if we use Optional Chaining in the above code, we can express it as follows.
yourNum = myObj.a?.aa

// Result
1


yourNum = myObj.b?.aa

// Result - "undefined" because it doesn't have any value
undefined

Among the examples above, the following code represents the case where the property does not exist. In this case, the value of undefined is declared and no runtime error is generated, making this method very useful. When applying this method to all existing codes, the code length can be reduced and readability can be increased.

So far, we have briefly looked at Optional Chaining.


By the way, post-ES6 syntax is transpiled into the previous syntax using a transpiler such as babel when deployed in a live environment. Depending on the development environment, this process may be necessary, so please keep this in mind.
Perhaps you're looking for the following text as well?

Previous

Adding the share function for JavaScript web pages. navigator.share()

Previous

[Style Guide] How to Set Up Prettier for JavaScript in IntelliJ and WebStorm