You are currently browsing archived articles from

ES2020 Optional Chaining & Nullish Coalescing

Wednesday, March 11th, 2020

Of the various Features proposed in ES2020, perhaps two of the simplest features will prove to be the most useful, at least in terms of simplification and maintenance are concerned.

Specifically, the Optional Chaining Operator and Nullish Coalescing Operator are of particular interest as they are certain to result in less verbose, less error prone expressions.

Optional Chaining

In a nutshell, Optional Chaining provides a syntax for undefined / null checks when performing nested object references using a simple question mark appended by a dot (?.) notation.

For instance, consider how many times you may have written defensive expressions similar to the following:

Or perhaps you have assigned intermediate values to temporary variables to perform the same:

The need to check for possible reference errors quickly becomes tedious, and with each lookup we increase the potential for introducing bugs. Utilities can be implemented for delegating these checks, but ultimately, this just moves the problem from one context to another, resulting in additional points for failure.

With Optional Chaining, however, accessing properties safely becomes considerably less verbose, as the examples above can be simplified to:

Reference checks when invoking functions also become simplified:

And dynamic property references can safely be performed as well:

Nullish Coalescing

In addition, combined with the Nullish Coalescing Operator, Optional Chaining becomes even more succinct as one can specify a value to resolve to rather than the default (undefined) by simply using a double question mark (??) notation. For example:

Moreover, Nullish Coalescing, while intended as a compliment to Optional Chaining, also solves additional problems when dealing with falsy values. For instance, consider how many times you may have written something similar to the following:

With the Nullish Coalescing Operator, we can avoid the problems outlined above as only undefined and null values will evaluate to true, so falsy values are safe:

Since Nullish Coalescing only checks for undefined and null, the above holds true for all other falsy values, so false, empty strings, and NaN are safe as well..

Optional Chaining w/Destructuring

One thing to note is that Optional Chaining does not resolve when destructuring. So, for example, the following will throw an exception:

Interestingly, though, combined with Nullish Coalescing, an exception will not be raised; though, the default will not be assigned, either:

Conclusion

As can be seen, ES2020 has no shortage of new features on offer to be excited about and, while arguably not as exciting as other features, Optional Chaining combined with Nullish Coalescing will certainly prove to be valuable additions.

Both Optional Chaining and Nullish Coalescing proposals are currently at Stage 4 and are available in most modern browsers as well as via @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator.

Quick Tip: Resolving Chrome Dev Tools Variable Hover Issue

Thursday, January 16th, 2020

With the Chrome (~79) update, you may have noticed that the Dev Tools variable hover > value feature has been broken. This issue is covered by 1033022 in Chromium; though, a stable fix for version 79 remains elusive.

For me, this was one of those “You don’t know what you got til’ it’s gone” type of situations as, I have become rather accustomed to this feature, and so having to rely on the Scope Panel has became quite tedious.

The good news is (or at least what has worked for me) was I was able to resolve the issue by simply uninstalling, then reinstalling Chrome. While generally this should be a last resort solution, and the fact that it actually worked is rather odd in that the same exact version was installed, it has worked, and so I figured I’d share for others to give a try until a proper fix is in place in Chrome 80.