How the Nullish Coalescing Operator Works in JavaScript

ES11 has added a nullish coalescing operator which is denoted by double question marks, like this: ??.

In this article, we will explore why it's so useful and how to use it.

Let's get started.

Want to learn Redux from the absolute beginning and build a food ordering app from scratch? Check out the Mastering Redux course.

Background Information

In JavaScript, there is a short-circuit logical OR operator ||.

The || operator returns the first truthy value.

The following are the only eight values that are considered to be falsy values in JavaScript.

• false
• undefined
• null
• ""(empty string)
• NaN
• 0
• -0
• 0n ( BigInt zero)

So if anything is not in the above list, then it will be considered a truthy value.

Truthy and Falsy values are the non-boolean values that are coerced to true or false when performing certain operations.

const value1 = 1;
const value2 = 23;

const result = value1 || value2; 

console.log(result); // 1

As the || operator returns the first truthy value, in the above code, the result will be the value stored in value1 which is 1.

If value1 is null, undefined, empty or any other falsy value, then the next operand after the|| operator will be evaluated and that will the result of the total expression.

const value1 = 0;
const value2 = 23;
const value3 = "Hello";

const result = value1 || value2 || value3; 

console.log(result); // 23

Here, because value1 is 0, value2 will be checked. As it's a truthy value, the result of the entire expression will be the value2.

The issue with the || operator is that it doesn’t distinguish between false, 0, an empty string "", NaN, null and undefined. They all are considered as falsy values.

If any of these is the first operand of ||, then we’ll get the second operand as the result.

Why JavaScript Needed the Nullish Coalescing Operator

The || operator works great but sometimes we only want the next expression to be evaluated when the first operand is only either null or undefined.

Therefore, ES11 has added the nullish coalescing operator.

In the expression x ?? y,

If x is either null or undefined then only result will be y.
If x is not null or undefined then the result will be x.

This will make the conditional checks and debugging code an easy task.

Try it yourself

let result = undefined ?? "Hello";
console.log(result); // Hello

result = null ?? true; 
console.log(result); // true

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

result = 45 ?? true; 
console.log(result); // 45

result = "" ?? true; 
console.log(result); // ""

result = NaN ?? true; 
console.log(result); // NaN

result = 4 > 5 ?? true; 
console.log(result); // false because 4 > 5 evaluates to false

result = 4 < 5 ?? true;
console.log(result); // true because 4 < 5 evaluates to true

result = [1, 2, 3] ?? true;
console.log(result); // [1, 2, 3]

So from all of the above examples, it's clear that the result of the operation x ?? y is y only when x is either undefined or null.

In all the other cases, the result of the operation will always be x.

Conclusion

As you have seen, the nullish coalescing operator is really useful when you only care about the null or undefined value for any variable.

Starting with ES6, there are many useful additions to JavaScript like

• ES6 Destructuring
• Import and Export Syntax
• Arrow functions
• Promises
• Async/await
• Optional chaining operator and a lot more.

You can learn everything about all the ES6+ features in detail in my Mastering Modern JavaScript book.

Check out free preview contents of the book here.

Also, you can check out my free Introduction to React Router course to learn React Router from scratch.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.