JavaScript Nullish Coalescing

Dec 9, 2019 updated Oct 12, 2021

Learn the JavaScript nullish coalescing operator (??) and how it sets a default value only when the left side is null or undefined, unlike falsy-based ||.

~~~

A powerful operator available in JavaScript is the nullish coalescing operator: ??.

Have you ever used || to set a default value if a variable was null or undefined?

For example, like this:

const myColor = color || 'red'

Well, nullish coalescing is going to replace || in there:

const myColor = color ?? 'red'

Why is this operator useful?

Well, there is a whole range of bugs that hide underneath the surface when using || to provide a fallback value.

In short, || handles values as falsy. ?? handles values as nullish (hence the name).

Which means that with || the second operand is evaluated if the first operand is undefined, null, false, 0, NaN or ''.

?? on the other hand limits this list to only undefined and null.

Tagged: JavaScript · All topics

~~~