Dhruv Samant's Blog
Nullish Coalescing Operator (??) In JavaScript

Photo by Arnold Francisca on Unsplash

Nullish Coalescing Operator (??) In JavaScript

Dhruv Samant's photo
Dhruv Samant
·

3 min read

Table of contents

What is Nullish Coalescing Operator in JavaScript ?

The Nullish Coalescing Operator allows us to check if a value is null or undefined, and provide a fallback value if that is the case.

Lets also see what the MDN docs say as well! According to MDN, the nullish coalescing operator is

"a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand."

This type of operator can be used when we want falsy values like zero or empty strings to be valid.

So lets remind ourselves what exactly the falsy values are,

  • NaN
  • 0
  • empty string " " or ' '
  • null
  • undefined
  • false

Now lets see nullish coalescing operator with an example:

const a = 0 ?? 60;

So what do you think the value of "a" is ?

It is 0, because the ?? operator does not coerce falsy values.

Therefore, the nullish coalescing operator only returns the right-hand side operand, if the left-side operand is null or undefined.

So if in above example, it would return 60 if the first value was "undefined" or "null" instead of 0.

Lets try to change the first value to undefined/null and see what comes up:

const a = undefined ?? 60
const b = null ?? 60

In this case it makes sense to return the right-hand side value, because undefined/null means that the variable was not assigned a value.

Now, some us might argue that we can just use the OR operator ( | | ) instead of ??.

I can see where you are coming from but let me show you the problem with the OR operator !

Lets see a example:

const a = 0 | | 60;

In the above case, the | | operator returns "60" because "0" is evaluated as a falsy value.

But why is OR operator returning "60" ?

cause the | | is a boolean logical operator, which is why it coerced "0" to a falsy value, and returned the number "60"

So to tackle this problem we can use the nullish coalescing operator. By replacing | | with ?? we get the correct value, which is "0" in this case.

The Nullish Coalescing and Optional Chaining Operators

These two operators work very well together.

Why do they work well together? The reason why they work well together is that they both treat undefined, and null as valid values.

Therefore, it makes it handy when we access properties that are one of the two values - undefined or null.

const data = {
     city: "Pune"
};

console.log(data.city?.toLowerCase() ?? "No city defined");  // Pune
console.log(data.town?.toLowerCase() ?? "No town defined");  // No town defined

Therefore, these two operators are convenient both on their own and when used together.

Conclusion

The Nullish Coalescing Operator is useful when you want to use falsy value as a default value.

Some key points from the article:

  • The Nullish Coalescing Operator returns the right-hand side value when the left-side one is undefined or null.

  • Using the OR ( | | ) operator, you can run into troubles with falsy values like 0 and empty strings.

  • | | is a logical boolean operator, and it coerces values. Thus, it does not return falsy values.

If you enjoyed the article consider sharing it and feel free to connect with me on Twitter with you opinions.

JavaScript