How to use the new Nullish Coalescing operator in JavaScript

Concise, useful JavaScript lessons — make it easy.

Image of two monitors with code in their screens

The nullish coalescing operator “??” adds a new short-circuiting operator that returns its right-hand operand when its left-hand side operand is null or undefined, otherwise returns its left-hand operand.

His current stage is Stage 4, which means that the addition is ready for inclusion in the formal ECMAScript standard.

It works in recent versions of Chrome or Firefox, among others.

Here is a simple use case

const team = null ?? 'A team';

console.log(team);

//A team

Nullish coalescing operator motivation

Surely you know the other short-circuiting operators like “&&” or “||.” These operators are used to handle ‘truthy’ and ‘falsy’ values. But, first, what is “false” or “truthy” value in JavaScript?

Falsy values:

boolean false

null value

undefined

Number 0

Number NaN

BigInt 0n

An empty string “”

Truthy values:

All values ​​except the previous ones.

The problem with “&&” and “||” operators is because his definition of truthy and falsy leads to bugs. These operators work well with null or undefined values, but many false values can produce unexpected results.

In this example, I want that when we process the response, we assign to our variable “enableAudio” the value of zero. On the contrary, it is setting the default value of one since the zero value of the response is interpreted as a falsy value.

const response = {

enableAudio : 0

} const enableAudio = response.enableAudio || 1;

enableAudio

//1

The nullish coalescing operator “??” acts very similar to the operator “||,” except that it doesn’t use “truthy” when evaluating the operator. Instead, it uses the definition of “nullish,” which means that the value is strictly equal to null or undefined.

In the following example, the variable “enableAudio” has a value of zero, and with the nullish coalescing operator “??” this is evaluated like a not nullish value. Therefore, the expression evaluates to the left-hand side.

const response = {

enableAudio : 0

} const enableAudio = response.enableAudio ?? 1;

enableAudio

//0

With operator “||” if the first operand is truthy, it evaluates to the first operand. Otherwise, it evaluates to the second. With Nullish Coalescing operator, if the first operator is falsy but not nullish, it evaluates to the second operand.

console.log(false || true);//true

console.log(false ?? true);//false

Here, zero is evaluated as a falsy value; hence the expression evaluates to the right-hand value using the “|| operator.” But, with Nullish Coalescing operator, zero is not null. Therefore, the expression evaluates to the left-hand value.

console.log(0 || 1); //1

console.log(0 ?? 1); //0

In the next example, if you evaluate it with the operator “||,” the result that you obtain is the right-hand value because an empty string is a falsy value. Instead, with the Nullish Coalescing operator, an empty string is not null, and therefore the expression evaluates to the left-hand value.

console.log('' || 'Hello!');//Hello

console.log('' ?? 'Hello');//''

In summary, the operator “||” handles values as falsy or truthy, and the operator “??” handles values as nullish. This means that with the operator “||,” the second operand is evaluated if the first operand is undefined, null, 0, false, NaN, or an empty string but with the operator “??” the second operand is evaluated if the first operand is null or undefined.

Conclusion

There is a big range of bugs that hide when evaluating expressions using the operator “||” that you can avoid if you use the new nullish coalescing operator “??” and also you can prevent a lot of code boilerplate.

I hope this helps you to know the nullish coalescing operator “??”, thank you for reading me.