Salient Features in Javascript that you need to know: Optional Chaining

Tram Ho

Optional chaining is a technique that makes working with Javascript easier. It is also needed like Fat Arrow Functions or 'let' and 'const'. How does Option Chaining work? What problems does it solve? Let's study together to understand better.

Question

Imagine: You get data from the API, and the object returns as Deeply Nested Objects, now we need to go through many object properties to get the innermost properties.

With the above method, getting firstName is really not good. A better solution might be like this:

As you can see in the above example, even simple things like get firstName of a person are so complex. So this is why we have frameworks like lodash to easily do these things.

lodash makes code more readable, but also makes you more dependent on your codebase. You need to update it, and if you work on a team, you need to explain and guide how to use it for your team. Therefore, this is not a reasonable solution either.

Solution

Optional chaining is the solution to all that.

1. How it works

Optional chaining introduces a new syntax that may seem strange to you at first glance, but after a few minutes you'll get used to it.

As in the example above, we see the appearance of syntax ?. If there is a syntax ?. The person before that, is we checking whether that person exists or not? Or, in many cases, is the value null or undefined? At this time, it will not return the error, only undefined. Therefore, personFirstName will be undefined. The same question for detail? and name? If any of the parent properties have null or undefined values, then personFirstName will return undefined. This is called short-circuiting. When javascript finds null or undefined, it will short circuit and stop going further.

2. Default values

We need to learn about the Nullish coalescing operator . It sounds hard to learn. Hi really not that hard. Take a look at the example below:

The syntax of Nullish coalescing operator expressed as ?? It is also quite easy to read. If the left side has the value undefined, then will the personFirstName have the value to the right ?? ie 'stranger'.

3. Dynamic properties

Sometimes we want to access a dynamic value. It can be an array or a dynamic property of an object.

The above example could understand jobs?.[jobNumber] means jobs[jobNumber] but it will not return an error but instead will return to none .

4. Function or method call

Sometimes we work with an object without knowing whether it is a method or not. Here we can use the syntax ?.() Or with arguments ?.({ some: 'args'}) . If this method does not exist on the object, it will return undefined.

Without the getCurrentJob function, currentJob will have none.

5. Start using

Not currently supported for browsers – but Babel supports. Other babel.js plugins are easy to integrate if you have Babel set up. You can refer to babel-plugin-proposal-optional-chaining for installation and usage.

Epilogue

I think with Chaining Option will make javascript code much easier to read and also less error. You can also learn more about Option Chaining at the proposal .

Above is the share about Option Chaining that I refer from the article of lampewebdev and Optional chaining . Hope to be helpful for you when coding with javascript.

Share the news now

Source : Viblo