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.