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:

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.

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 and get a daily dose of educational content right in your feed, soon also including short educational videos.