Optional Chaining & Nullish Coalescing in Javascript!!

Optional Chaining  & Nullish Coalescing in Javascript

Javascript soon be having most awaited operators Optional Chaining & Nullish Coalescing. Currently these two features are as proposals in v8 (optional-chaining, nullish-coalescing).

These operators are already available to try on chrome canary. It means we are seeing them soon in the chrome'a stable release and Node.js.

For example lets define a book object

Optional Chaining  & Nullish Coalescing in Javascript

Now if we want to access the sale property then it might be error-prone, as any of them might evaluate to null or undefined (also known as “nullish” values).

Optional Chaining  & Nullish Coalescing in Javascript

To safely access the sale property, Checking for property existence on each step easily turns into a deeply-nested structure of if-statements or a long if-condition replicating the property access chain.

Optional Chaining  & Nullish Coalescing in Javascript
or

Optional Chaining  & Nullish Coalescing in Javascript

According to a recent spec proposal,
“an optional chain is a chain of one or more property accesses and function calls, the first of which begins with the token ?.”
Using the new optional chaining operator, we can rewrite the above example as follows:

Optional Chaining  & Nullish Coalescing in Javascript

It can also used with function calls

Optional Chaining  & Nullish Coalescing in Javascript

and dynamic properties

Optional Chaining  & Nullish Coalescing in Javascript

This last form is also available for optionally indexing arrays, e.g.: If the array of `books` is `null` or undefined, then bookName gracefully evaluates to undefined.

Optional Chaining  & Nullish Coalescing in Javascript

The optional chaining operator can be combined with the nullish coalescing ?? operator when a non-undefined default value is needed. This enables safe deep property access with a specified default value, addressing a common use case that previously required third party libraries like lodash.

The nullish coalescing operator (??) acts very similar to the || operator, except that we don’t use “truthy” when evaluating the operator. Instead we use the definition of “nullish”, meaning “is the value strictly equal to null or undefined”. So imagine the expression lhs ?? rhs: if lhs is not nullish, it evaluates to lhs. Otherwise, it evaluates to rhs.

For example if we want to gracefully resolve gener to "unknown" in above book object, instead of

Optional Chaining  & Nullish Coalescing

we can use nullish coalescing ?? operator

Optional Chaining  & Nullish Coalescing in Javascript


Conclusion :

These two operators will help us to write :
  • Less error prone code
  • Readable code

Comments

  1. Casino Night Finder | DrmCD
    View our directory of Casinos Near You 창원 출장마사지 and Download casino games for free, and 광주광역 출장마사지 you can find a casino live on your mobile 세종특별자치 출장마사지 device. With this guide, you can 남원 출장마사지 see all 거제 출장안마

    ReplyDelete

Post a Comment

Popular posts from this blog

JS Tip - Required function parameters

JS Tip - Use variable parameters for setTimeout()

Disallow specific imports in Javascript Project