How to use the new Nullish Coalescing operator in JavaScript

Concise, useful JavaScript lessons — make it easy.

Kesk Noren
Mar 7 · 3 min read
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 right-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

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

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

JavaScript in Plain English

Learn the web's most important programming language.

Kesk Noren

Written by

Software engineer, full-stack developer, and Sci-Fi writer.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.3K

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade