Nullish Coalescing - Let Falsy Fool You No More
Tags: webdev, javascript, node, learning
Published: 2019-12-10 14:05:23

---
title: Nullish Coalescing - Let Falsy Fool You No More
published: true
description: One of the latest and greatest additions to JavaScript has arrived!
tags: webdev, javascript, node, learning
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q8am4jwwygk3g3oet0k5.png
---

Languages are constantly changing. And if you've read other posts of mine you know that I love checking in on the latest and greatest in JavaScript.

Just last week TC39 (the committee behind ECMAScript) greenlit a few new awesome features. This week we'll dive into [nullish coalescing](https://github.com/tc39/proposal-nullish-coalescing). Sort of a mouthful of a name, isn't it?

Let's break it down.


## Using or to set a default

Often in programming, we can't count on a value existing, and we want to set a default instead. There are a few different ways to do this, but one of the most common is to use or, represented by `||`.

```javascript
let snippet = null

let snippet = snippet || "code snippet"
```

In this example, `snippet` is set to `null`. Since we always want a string, we'll reassign it using the or operator. This expression will keep `snippet` the same unless `snippet` is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). When it's falsy the expression resolves to "code snippet" instead. That's because falsy values in JavaScript are values that are "considered false when encountered in a Boolean context", like our example above.


## Falsy values

The or operator is super helpful! But in JavaScript, falsy values are kind of tricky. They include values like `null` and `undefined`, but they also include `0`, `false`, and empty string. Yikes! That means that this expression will evaluate a little differently than we might want it to.

```javascript
let age = 0

let age = age || 1
```

In this example, `age` becomes `1`. But `0` is a valid age! We don't want that. We only want to default to `1` if `age` is not a number.

> Note that there is a function `isNaN` to check this, but we're ignoring that situation for now.

We quickly discover that there are plenty of other situations this causes problems in. My particularly favorite is the empty string case. Oftentimes you don't want a `null` string variable because it will throw errors when you attempt to manipulate it. But having an empty string is ok.

```javascript
let message = ""

let message = message || "Welcome to DEV"
```

However, in JavaScript, empty string is falsy! So `message` gets set to "Welcome to DEV" even when we don't want it to. 

> Note that we can check for type of `stringValue`, but that's annoying.

## Along comes nullish coalescing

And that's what this addition is all about. We can replace our `||` check with the nullish coalescing operator, `??`. Using this operator works much the same as `||`, with one major exception. If the value on the left-hand side of the operator is `null` or `undefined` the default (right-hand side) will be used. Otherwise, the default is ignored.

So let's look at our three examples.

```javascript
let snippet = null

let snippet = snippet ?? "code snippet"
```

This will still resolve to `"code snippet"`. `snippet` is `null`.

How about in the case of a falsy value like zero?

```javascript
let age = 0

let age = age ?? 1

```
`age` is still `0`! `0` is not `null` or `undefined`, so the right-hand argument to the operator is ignored.

And finally our empty string example.

```javascript
let message = ""

let message = message ?? "Welcome to DEV"
```

`message` stays an empty string, just like we want.

## Well this is awesome

Isn't it?! Falsy values have caused me lots of strife over the years when they caused unintentional side effects, so I'm super psyched for this. Stay tuned for other new features. We'll tackle optional chaining next.