Optional Chaining and Nullish Coalescing are coming to JavaScript
Tags: javascript, node, beginners
Published: 2019-11-13 17:45:05

---
title: Optional Chaining and Nullish Coalescing are coming to JavaScript
published: true
description: 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.
tags: javascript, node, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d3ztwsb8wphhohkc9wu1.jpeg
series: Javascript Next
---

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](https://github.com/tc39/proposal-optional-chaining))

Long chains of property access can be error-prone.

```javascript
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.

```javascript
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](https://lodash.com/docs/latest#get) have a solution for this, they provide a getter for properties. If the property doesn't exist, Lodash returns `undefined`.

```javascript
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.

```javascript
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.

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

### Nullish Coalescing ([proposal](https://github.com/tc39/proposal-nullish-coalescing))

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

```javascript
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.

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

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

```javascript
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).

```javascript
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](https://babeljs.io/blog/2019/11/05/7.7.0) or [Typescript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html) to make the syntax available.