ES2020 'nullish coalescing operator' by example
Tags: javascript, webdev, tutorial, tips
Published: 2020-05-13 19:40:14

{% youtube DobIcwOiDX8 %}

Recently, I presented the ['Optional Chaining'](https://dev.to/qhantomcode/es2020-optional-chaining-by-example-400i) operator. In this article, I'm going to cover another useful feature that comes with ECMA-Script version 11 or ES2020: the ['Nullish Coalescing'](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) operator.
It is a perfect example that such a straightforward topic is wrapped into an allegedly complex expression.

Basically, what the nullish coalescing operator does, is, that it checks a value of its left-hand side whether it's `null` or `undefined`. If one of these two suspects is given, the right-hand side of the logical operator is returned, also called a fallback.

```javascript
function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured ?? 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured())

// OUTPUT
// 'Fallback Value' ✅
```

Now you might ask yourself: 'Hey, what about the default value you can set with the logical `OR` operator?'. That's a valid question indeed. The logical `OR` operator checks the left-hand side for a falsy value and if it's the case it takes the default value on the right side. Falsy values are `0`, `false`, an empty string, `undefined`, `null` and `NaN`. But what if the value on the left-hand side is supposed to be an empty string, a zero or the boolean `false` even? Well, then the `OR` operator wouldn't work as expected.

```javascript
function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured || 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured(false))

// OUTPUT
// 'Fallback Value' ❌
// expected false
```

And here comes the 'Nullish Coalescing Operator'. Replace the two pipes with two question marks and the magic has happened. The expression will now only take the default value if the left-hand side is `undefined` or `null`.

```javascript
function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured ?? 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured(false))

// OUTPUT
// false ✅
```

Keep in mind that you cannot chain the 'Nullish Coalescing Operator' with the `AND` or `OR` operator directly. You must use parenthesis in order to make it work. Now let's evaluate the if-condition. `true || null` gives us `true`. `true !== undefined` or `null` so we flow inside the block. 

```javascript
if ((true || null) ?? 'Chaining Is Training') {
  console.log("I'd like to get logged");
}

// OUTPUT
// "I'd like to get logged" 🎉
```

Replace `true` with `undefined`. `undefined || null` gives us `null` and thus, the nullish coalescing operator returns the value of its right-hand side 'Chaining Is Training'. The string is a truthy value and gets type-coerced to `true` since JavaScript is a weakly or loosely typed language. The if-condition is therefore fulfilled and we get the `console.log` as well. 

```javascript
if ((undefined || null) ?? 'Chaining Is Training') {
  console.log("I'd like to get logged");
}

// OUTPUT
// "I'd like to get logged" 🎉
```

What the 'Nullish Coalescing Operator' and the ['Optional Chaining'](https://dev.to/qhantomcode/es2020-optional-chaining-by-example-400i) operator have in common, is, that they both treat `undefined` and `null` as specific values.

You're very welcome to subscribe to my YouTube channel for more informative videos: [Subscribe!](https://www.youtube.com/channel/UCtZiuahpLqfVCNj4uoUsTAw?sub_confirmation=1) 📹

If you liked the post/video I'd appreciate to see you as a follower on my social media:
➡ [YouTube](https://www.youtube.com/channel/UCtZiuahpLqfVCNj4uoUsTAw?sub_confirmation=1)
➡ [Twitter](https://twitter.com/qhantomCode)
➡ [Facebook](https://www.facebook.com/Phantom-112488537108046)