Optional Chaining and Nullish Coalescing are coming to JavaScript

Two long-awaited operators are coming to Javascript. They are both in the draft stage (stage 3) and are announced to be available in Chrome Canary. It means we are seeing them soon in the Chrome stable release and Node.js. I remember years ago when Coffeescript was the new shiny thing, and it had both of these features. I can say it worth the waiting: these two operators will eliminate verbose code blocks or the usage of a library when checking for property chains and nullish values.

Optional Chaining (proposal)

Long chains of property access can be error-prone.

const name = movie.actor.name.first;

Although the above example is readable, any of the properties accessed can have null or undefined value. If this happens, we will get an error: Uncaught TypeError: Cannot read property 'name' of undefined. We can make our code more robust by creating an if statement before accessing the deepest property.

let name;

if (movie && movie.actor && movie.actor.name) {
  name = movie.actor.name.first;
}

Now we are free of errors, but the code has become less readable.

Utility libraries like Lodash have a solution for this, they provide a getter for properties. If the property doesn't exist, Lodash returns undefined.

import { get } from 'lodash';

const name = get(movie, 'actor.name.first');

This mechanism will be available on the language level with the introduction of the optional chaining operator.

const name = movie?.actor?.name?.first;

How does it work? When Javascript encounters property access where the object doesn't exist, it returns undefined and stops.

Optional chaining also works with dynamic property access and method access.

const name = movie?.actors?.[0].name?.first;
const name = movie?.getActor?.().name?.first;

Nullish Coalescing (proposal)

When accessing properties or variables, default values are also desired. You can use one of the short-circuiting operators, ||.

const name = movie?.actor?.name?.first || 'Jane Doe';

This solution works but has a significant shortcoming. The expression is evaluated from left to right and returns the first non-falsy value. Even if the property is set to a falsy value ('', false, 0) it will return the default value. We have to keep in mind which values convert to false and which are not. Converting falsy values is error-prone, and this is why the nullish coalescing operator will help us.

const name = movie?.actor?.name?.first ?? 'Jane Doe';

Without the operator, we can solve it also with Lodash.

import { get } from 'lodash';

const name = get(movie, 'actor.name.first', 'Jane Doe');

The nullish coalescing operator only returns the default value when the value on the left side is null or undefined. It won't return the default value when the left-side value is 0, '', Nan, or false (falsy values).

false ?? 'default'; // false
0 ?? 'default';     // 0
'' ?? 'default';    // ''

null ?? 'default';      // 'default'
undefined ?? 'default'; // 'default'

Summary

I hope you are as much excited about these operators as I'm. They will further simplify and make these use-cases less error-prone. Until its release, we can use Babel or Typescript to make the syntax available.

Comments

[PatricNox]

Yeeehaw, amazing!!
I love the optional chaining, haven't actually crossed it before.

Just imagine how handy it'll be in Vuejs development ✔️🎉🎉

[Gábor Soós]

No more if statements 🥳

[Patricio Ferraggi]

Love them, I use this ones in c# all day and I really miss them when I switch to JavaScript

[Gábor Soós]

You won't miss them now ;)

[Adarsh Madrecha]

When Would be able to use it? I mean, in my VueJs project, when will we be able to start using it? Will we have to wait for Core-JS to support it and then we can start using it?

[alistair smith]

They will be shipped with Chrome 80+ and are already in Chrome Canary (which is currently 81)