# JavaScript Explained: The Nullish Coalescing Operator (??)

Introduced with ES11, the nullish coalescing operator is an alternative to the long-used logical OR (||). It comes with some new, unique utility that can actually replace a lot of the logical OR's previous applications. The operator is an important tool in any JavaScript developer's tool belt.

---

## Previous Applications Of The Logical OR

The logical OR in JavaScript has always seen application outside of boolean algebra. Thanks to type coercion (the automatic conversion of types), the operator can also set default values when a specific value is falsy.

> Falsy is the opposite of truthy and is defined by the Boolean constructor. Any values you pass into that function that lead to the resulting boolean being false are called falsy, and all values that lead to true are considered truthy.

Let's look at a common usage of the logical OR:

```JavaScript
const format = (value) => {
  const defaulted = value || 'default';
  return `I formatted ${defaulted} for you.`;
}
```

The function `format` takes a parameter `value` and returns a formatted string. Before that, a temporary variable `defaulted` is created that uses an assignment with the logical OR. If `value` is falsy in any way, `'default'` is assigned and then included in the formatted string.

At first sight, this logic looks perfectly fine, but what if `value` is the empty string? Might be okay to default then. But what about `0`? Is it a valid value, or isn't it? You now see a small problem arising. Do you need special handling for the number `0`? Isn't the empty string still acceptable as input? What about boolean `false`? Isn't that valid as a string?

---

## The Nullish Coalescing Operator

The nullish coalescing operator works for assignments like the logical OR does, but it covers a smaller range of values. Falsy values are okay for this operator, and it only reacts to `null` and `undefined`. Often, this is more what you really want to use. Many falsy values are simply *okay* to use. `0`, `''`, `false`, etc., are usually perfectly good values.

Let's quickly rewrite the function from above with the nullish coalescing operator.

```JavaScript
const format = (value) => {
  const defaulted = value ?? 'default';
  return `I formatted ${defaulted} for you.`;
}
```

If you now pass `0`, or `''`, you'll see that the values are acceptable and get returned within the formatted string. You get `'default'` included in the resulting string when you pass in `undefined`. Same for `null`.

More experienced developers might now argue that default parameters are also a way to solve this issue. They are, however, only 50% right with that argument. The nullish coalescing operator covers `undefined` **and** `null`. Default parameters treat `null` as an explicit value and don't default in that case. This means that the `null` reference still finds its way into your function's body, and you have to deal with it separately. Especially this is one more reason to use the nullish coalescing operator instead, although it occupies an extra line of code within your function's body.

---

## Before You Leave

Do you like content like this? Why don't you follow me on social media for a daily dose of education?

Join me on [Instagram](https://www.instagram.com/oliverjumpertz) and get a daily dose of educational content right in your feed, soon also including short educational videos.