JavaScript Explained: The Nullish Coalescing Operator

JavaScript Explained: The Nullish Coalescing Operator

Introduced in 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. This operator is an important tool in any JavaScript developer’s tool belt.

These reasons are enough to look a little deeper into the nullish coalescing operator.

Previous Applications Of The Logical OR

The logical OR in JavaScript has always seen applications 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 considered 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? It 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 as 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 only 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.


The nullish coalescing operator is an alternative to the logical OR when assigning values. It only reacts to null and undefined and leaves falsy values as is.

In most cases, you probably want to use the nullish coalescing operator instead of the logical OR, but keep in mind that you alter the logic of your functions if you simply replace the old OR operator.

Oliver Jumpertz


Feel free to contact me

Contact Me



Join the Newsletter

You will regularly be informed about new content, special offers, and interesting information about software development.

Your data might be transferred to servers located in the USA. By subscribing, you agree to the data transfer. You can revoke your approval at any time by unsubscribing. For more information, please visit the privacy policy.

    We won't send you spam. Unsubscribe at any time.