Nullish Coalescing and Optional Chaining Operator
Tags: javascript
Published: 2020-09-10 05:34:26

---
title: Nullish Coalescing and Optional Chaining Operator
published: true
date: 2020-09-07 00:00:00 UTC
tags: javascript
canonical_url: https://nainacodes.com/blog/nullish-coalescing-and-optional-chaining-operator
---

ECMAScript 2020 has released many interesting features, and in this post I want to discuss two of the new features that I really like — the nullish coalescing operator and the optional chaining operator.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#nullish-coalescing-operator)Nullish coalescing operator

Quoting from the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) docs, it is

> a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

It is denoted by a double question mark `??` . Here is an example.

```javascript
undefined ?? 'Web design'; // Web design
null ?? 'Mansion'; // Mansion

```

In this example, the right-hand side value is returned because the left-hand side is null or undefined. But if the left-hand side operand has a value (as in the following example), the left-hand side value is returned.

```javascript
'JavaScript Data Structures' ?? 'Web design'; // JavaScript Data Structures

```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#how-is-it-different-from--operator)How is it different from || operator

Unlike the OR operator, the nullish coalescing operator only looks for **_null_** or **_undefined_** values. If the value is a _falsey_ value (besides _null_ and _undefined_), the nullish coalescing operator will return the falsey value.

Here are the falsey values in JavaScript.

- false
- null
- undefined
- 0
- ''
- NaN

```javascript
0 ?? 15; // 0
false ?? true; // false
'' ?? 'banana'; // ""

```

So when do you use the null coalescing operator over the `OR` operator? Here is a simple guideline on what to use. If you want to filter out falsey values, then you should probably use the `OR` operator. But if falsey values are valid default values to you, then you should probably use the nullish coalescing operator.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#chaining-nullish-coalescing-operator)Chaining nullish coalescing operator

It is cool that you can actually chain the nullish coalescing operator, so this is completely valid.

```javascript
null ?? undefined ?? 0 ?? 'nice'; // 0
null ?? '' ?? 'great'; // ''

```

You cannot, however, combine it with `&&` or `||` operators. This will throw a `Syntax` error.

```javascript
null || undefined ?? 'not working'

```

But if you wrap the || expression with a parethesis, it will work.

```javascript
(null || undefined) ?? 'working';

```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#optional-chaining)Optional Chaining

This is my favorite new feature in ECMAScript 2020. Have you ever encountered a code like this?

```javascript
const person = {
  address: {},
};

if (person.address && person.address.position && person.address.position.latitude) {
  // do something
}

```

Before accessing the latitude property, you first have to do a series of checks to make sure it actually exists, otherwise you will get an error `Cannot read property 'latitude' of undefined`. I frequently encounter code like this, and it can sometimes be pretty annoying.

Here is where optional chaining shines. We can check if the property exists by just using `?.` after the property of an object. Let's refactor the code above.

```javascript
if (person.address?.position?.latitude) {
  // do something
}

```

Now it is much shorter and cleaner. The optional chaining operator will check for us if the property exists. If the property doesn't exist it will just return _undefined_ and not throw an error.

You can also use optional chaining with arrays and functions. Suppose you have an array of objects like this.

```javascript
const persons = [
  {
    name: 'Peter',
  },
  {
    name: 'Jessica',
  },
];

```

If you try to access 3rd person name (which doesn't exist), it will throw an error.

```javascript
persons[2].name; // Cannot read property 'name' of undefined

```

But if you use the optional chaining operator, it will just return _undefined_.

```javascript
persons[2]?.name; // undefined

```

The same with functions (returns _undefined_ if it doesn't exist)

```javascript
persons[2]?.name.toLowerCase(); // undefined

```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#combining-optional-chaining-with-nullish-coalescing-operator)Combining optional chaining with nullish coalescing operator

Because the optional chaining operator returns _undefined_ if a property doesn't exit, we could use it together with the nullish coalescing operator to set default values.

```javascript
const person = {
  address: {},
};

console.log(person?.address?.position ?? 'No address defined.'); // No address defined

```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#conclusion)Conclusion

JavaScript has immensely improved since ECMAScript 2015 and a lot of new features are being added to the language every year. It is no longer just a language you use for simple animations in the browser 😉

We have seen how to use the nullish coalescing and optional chaining operator. In summary, you can use the nullish coalescing operator if you want your default values to include falsey values. And if you are not sure whether an object has a certain property before accessing it, you can use the optional chaining operator to avoid a long series of check and `Cannot read property` error.

Thanks for reading! If this has helped you, kindly please share 😎