The Nullish coalescing operator in useful to handle default values, without short-circuiting on values that result as falsy.

Falsy values are undefined, null, false, 0, NaN, and '' in JavaScript, and sometimes you want to retain those values, explicitly excluding null and undefined.

The best example is if you have a property that could assume the values true, false and undefined (or null).

Additionally, the property should become true (default value) if it's not set.

You could be inclined to write something like this:

const trialActive = user.trialActive || true

But what happens if the user has the property set to false? The operator || will use the right-hand side of the expression, and set the variable trialActive to true!

That's not what we want. Only if the trialActive property is unset (e.g. null or undefined), the value should be assigned to true, not otherwise.

Here's where the Nullish coalescing operator comes in handy.

const trialActive = user.trialActive ?? true

In this case, only if the trialActive property is set to undefined or null, the default value true is used.

In the other cases, when user.trialActive contains the value true or false, the actual value is used, without short-circuiting the expression.

If you're interested, here is a blog post that describes Optional chaining in more detail.


For more in-depth explanation, I strongly suggest to skim through this blog post on v8.dev where Nullish coalescing is discussed way more in depth.

Portions of this page are modifications based on work created and shared by the V8 project and used according to terms described in the Creative Commons 3.0 Attribution License.