Nullish Coalescing Operator

Overview & Setup

This article will show the usage of the Nullish Coalescing Operator in Javascript. I will also discuss the benefit of using this operator in your code.

The demo I will do is a node.js project, but this can be done in any Javascript file. You can create a new Stackblitz Node project, or use mine here.

Getting Into It

The Nullish Coalescing Operator is a JavaScript operator that was introduced recently. It is similar to the OR (||) operator, but wil some cool difference. With the traditional OR operator, a condition would evaluate to false if the value was falsy. This meant that it would be evaluate to false on null, undefined, 0, '', NaN and false. With the Nullish Coalescing Operator (??), it will only evaluate to false if the value is null or undefined. This could present some problems and potential bugs in your code. For example, you may want to show a number as long as there is a number to show, even if the number is 0. So you could write a block of code like this:

//index.js

team.score = 0;
const score = team.score ?? "No Score Added";
console.log(score); // 0

This would assign the score to be any value held in team.score other than null or undefined. In this case score would be assigned the value of 0.

Instead if you wrote:

//index.js

team.score = 0;
const score = team.score || "No Score Added";
console.log(score); // 'No Score Added'

the score variable would be 'No Score Added' because team.score is 0 which is a falsy value. In a case like this, we obviously would not want that to be the result, so the ?? is the perfect replacement operator.

Wrap Up

The Nullish Coalescing Operator is a cool new operator that can clean up your code and help out a lot. Only evaluating to false on null and undefined can be extremely useful. But at the same time it can create some problems if you don't understand exactly what it is doing. Hopefully after reading this you are more clear on the use of it and can add it to your arsenal of JavaScript Operator.

For some examples of the difference between the || and ?? operators, or to try it out yourself, you can visit this Stackblitz (Or take a look at the code below).

//index.js

console.log(`What will I Show?? ${null || hi}`);
// result: hi
console.log(`What will I Show?? ${undefined || hi}`);
// result: hi
console.log(`What will I Show?? ${NaN || hi}`);
// result: hi
console.log(`What will I Show?? ${false || hi}`);
// result: hi
console.log(`What will I Show?? ${0 || hi}`);
// result: hi
console.log(`What will I Show?? ${"" || hi}\n\n`);
// result: hi

console.log(`What will I Show?? ${null ?? hi}`);
// result: hi
console.log(`What will I Show?? ${undefined ?? hi}`);
// result: hi
console.log(`What will I Show?? ${NaN ?? hi}`);
// result: NaN
console.log(`What will I Show?? ${false ?? hi}`);
// result: false
console.log(`What will I Show?? ${0 ?? hi}`);
// result: 0
console.log(`What will I Show?? ${"" ?? hi}`);
// result: ''