JavaScript will soon support optional chaining operator as its ECMAScript proposal reaches stage 3

Last month, the ECMAScript proposal for optional chaining operator reached stage 3 of the TC39 process. This essentially means that the feature is almost finalized and is awaiting feedback from users. The optional chaining operator aims to make accessing properties through connected objects easier when there are chances of a reference or function being undefined or null.

https://twitter.com/drosenwasser/status/1154456633642119168

Why optional chaining operator is proposed in JavaScript

Developers often need to access properties that are deeply nested in a tree-like structure. To do this, they sometimes end up writing long chains of property accesses. This can make them error-prone. If any of the intermediate references in these chains are evaluated to null or undefined, JavaScript will throw the TypeError: Cannot read property 'name' of undefined error.

The optional chaining operator aims to provide a more elegant way of recovering from such instances. It allows you to check for the existence of deeply nested properties in objects. How it works is that if the operand before the operator evaluates to undefined or null, the expression will return to undefined. Or else, the property access, method or function call will be evaluated normally.

MDN compares this operator with the dot (.) chaining operator. “The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is null or undefined, the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist,” the document reads.

The concept of optional chaining is not new. Several other languages also have support for a similar feature including the null-conditional operator in C# 6 and later, optional chaining operator in Swift, and the existential operator in CoffeeScript.

The optional chaining operator is represented by ‘?.’. Here’s how its syntax looks like:

obj?.prop // optional static property access

obj?.[expr] // optional dynamic property access

func?.(...args) // optional function or method call

Some properties of optional chaining

Short-circuiting: The rest of the expression is not evaluated if an optional chaining operator encounters undefined or null at its left-hand side.

Stacking: Another property of the optional chaining operator is that you can stack them. This means that you can apply more than one optional chaining operator on a sequence of property accesses.

Optional deletion: You can also combine the ‘delete’ operator with an optional chain.

Though there is time for the optional chaining operator to land in JavaScript, you can give it try with a Babel plugin. To stay updated with its browser compatibility, check out the MDN web docs.

Many developers are appreciating this feature. A developer on Reddit wrote, “Considering how prevalent 'Cannot read property foo of undefined' errors are in JS development, this is much appreciated. Yes, you can rant that people should do null guards better and write less brittle code. True, but better language features help protect users from developer laziness.”

Yesterday, the team behind V8, Chrome’s JavaScript engine, also expressed their delight on Twitter:

https://twitter.com/v8js/status/1166360971914481669

Read the Optional Chaining for JavaScript proposal to know more in detail.

ES2019: What’s new in ECMAScript, the JavaScript specification standard

Introducing QuickJS, a small and easily embeddable JavaScript engine

Introducing Node.js 12 with V8 JavaScript engine, improved worker threads, and much more