DEV Community

Cover image for Optional Chaining and Nullish Coalescing are coming to JavaScript
Gábor Soós
Gábor Soós

Posted on • Updated on

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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

const name = movie?.actor?.name?.first;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

import { get } from 'lodash';

const name = get(movie, 'actor.name.first', 'Jane Doe');
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (6)

Collapse
 
patricnox profile image
PatricNox

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

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

Collapse
 
sonicoder profile image
Gábor Soós

No more if statements 🥳

Collapse
 
patferraggi profile image
Patricio Ferraggi

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

Collapse
 
sonicoder profile image
Gábor Soós

You won't miss them now ;)

Collapse
 
adarshmadrecha profile image
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?

Collapse
 
alistaiiiir profile image
alistair smith

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