What the heck is Nullish Coalescing Operator?

I was intrigued about the Nullish Coalescing Operator ever since I had heard about it, primarily because it sounded very fancy X'D.

Gentleman Bear

I decided to learn more about it. Hence this blog. I'll try to keep things as simple and beginner friendly as possible.

Pre-requisites

fundaments of JS.

Allright, let's get right into it then!

What the heck is "??" ?

The nullish coalescing operator is syntactically defined as '??' Basically, it keeps an eye open for 'null' and 'undefined' values. Let's see how with the help of an example.

Suppose we have the following expression: const fruitCount = noOfApples ?? noOfOranges Then the value of fruit will be dependent upon the value of apples. If noOfApples is null or undefined, then the value of fruitCount will be equal to noOfOranges. Contrary to this, if the value of noOfApples is anything other than null or undefined, then fruitCount will be equal to noOfApples.

To summarise things: In an expression such as a??b, the result is:

a, if a has any value other than null or undefined.
b, if a is null or undefined.

It's basically a syntactic sugar over result = (a !== null && a !== undefined) ? a : b;

Common use cases of the Nullish Coalescing Operator

1) Assigning a default value to a variable

The nullish coalescing operator makes it easy for you to provide a default value to a variable that has not been assigned one.

For example, let count; const sum = count ?? 0;

In the above example, since count it not initialized with a value hence the value of sum is provided by the second operand which is 0 in this case.

2) Selecting from a list of undefined/null values

Let's take into consideration a scenario where we have to display the name of a user.

let firstName = null; let lastName = null; let nickName = "Coldpigli";

// shows the first defined value:

console.log(firstName ?? lastName ?? nickName ?? "User"); // Coldpigli

In the above example the Coldpigli is logged since firstName and lastName are null and nickName provides a "defined" value (in the "??" sense of things).

Okay, but how is that different from '||' ?

The || can be used as ?? but there are some cases when you need to be wary of using ||.

The important difference between them is that:

|| returns the first truthy value.
?? returns the first defined value.

That means, || cannot distinguish between false, 0, an empty string "" and null/undefined. This can be a serious problems in cases when we want to treat 0 or false as values and not absence of it.

Let's understand this with the help of an example:

let count = 0;
console.log(count || 100); //100
console.log(count ?? 100); //0

Count 0 can be perfectly valid value for a variable that counts something. The count || 100 checks height for being a falsy value, and it’s 0, which is falsy so the result of || is the second argument, 100. The count ?? 100 checks count for being null/undefined, and it’s not so the result is count “as is”, that is 0.

Using ?? with && or ||

Javascript forbids using ?? in conjunction with && or ||. Therefor an expression such as a = b && c || d will result in syntax error.

However, there is way around it. You can prioritize the usage explicitly by using () such as, a = (b && c) || d. The above is a perfectly valid Javascript expression.

Alright, that brings me to the end of this blog. I hope the nullish coalescing operator doesn't seem as intimidating as it sounds anymore.

Until next time folks !