The Nullish Coalescing Operator (Double Question Mark ??) is a special case from the OR Logical Operator (||). Let’s introduce some use cases of it.

Introduction

In JavaScript, the Double Question Mark ?? is known as Nullish Coalescing Operator. It is introduced in the ECMAScript 2020 specification.

Simply, the Nullish Coalescing Operator is a logical operator that returns the right expression if only the left expression was null or undefined, else returns the left expression.

What is the Difference Between Double Pipe and Double Question Mark in JavaScript?

To know the difference between || and ?? operators in JavaScript, firstly, let’s remember what are the falsy values in JavaScript.

As we know, the falsy values in JavaScript are:

• false
• null
• undefined
• Not a Number keyword NaN
• Empty string ""
• Number zero 0

Great, look at this example:

const value = leftSide || rightSide;

By using the || in this example, value will equal the rightSide if the leftSide was ANY false value.

const value = leftSide ?? rightSide;

However, if you used the ?? operator, value would equal the rightSide if the leftSide was ONLY null or undefined false values.

Having said that, the ?? will return the same value as || in two cases:

• If the leftSide was a true value, both would return leftSide.
• If the leftSide equaled either null or undefined, both would return rightSide.

Having said that, you can consider the Nullish Coalescing Operator ?? a special case from the OR Logical Operator ||.

Use Cases of Nullish Coalescing Operator in JavaScript

After introducing the difference between the Nullish Coalescing Operator and OR Logical Operator, you might end up thinking that one of them is redundant.

Let me argue with you by introducing the following use case of the Nullish Coalescing Operator.

1- Defining a default value for a variable

const userInput1 = 4,
    userInput2 = "",
    userInput3 = 0,
    userInput4 = false;

const value1 = userInput1 || 5, // 4
    value2 = userInput2 || "Default", // "Default"
    value22 = userInput2 ?? "Default", // ""
    value3 = userInput3 || 20, // 20
    value33 = userInput3 ?? 20, // 0
    value4 = userInput4 || true, // true
    value44 = userInput4 ?? true; // false

As you see, you can use both operators to provide a default value, however, based on your situation, you should determine which operator is more fit in your code.

For example, look at userInput2, it might be acceptable for you if your client provides you with an empty string "", in such a case, you should use the ?? operator.

On the other hand, it is not acceptable for you if your client provided you with 0 number in the userInupt3, in such a case, you should use the || operator.

And the same for userInput4. It depends on your situation.

2- Defining a default value for a function argument

Like the previous use case, you can define a default value for a function argument. Have a look at the following example:

function sum(num1, num2) {
    num1 = num1 ?? 10;
    num2 = num2 ?? 10;
    return num1 + num2;
}

sum(); // 20
sum(1); // 11
sum(null, 1); // 11
sum(1, 1); // 2
sum(1, 0); // 1 (0 is acceptable)
sum(0, 1); // 1 (0 is acceptable)

Here, we don’t use the || to define the default value, because 0 value is acceptable.

3- Using it as a short circuit

function fun1() {
    console.log('fun1');
    return true;
}
function fun2() {
    console.log('fun2');
    return true;
}

fun1() ?? fun2();

As you see, by using the ?? operator, the fun2() will not be invoked at all because fun1() doesn’t return null or undefined, however if so, both functions will be invoked.

4- Using it in combination with the Optional Chaining Operator (?.)

const parent = {
    child: {
        name: 'Hello'
    }
};

const value1 = parent.child?.name ?? 'Defaul 1', // 'Hello'
    value2 = parent.otherChild?.name ?? 'Default 2'; // 'Default 2'

It is a perfect combination between the Optional Chaining Operator and the Nullish Coalescing Operator.

As you see, value2 is evaluated to be 'Default 2' as the left expression returns undefined as otherChild is not defined in the parent object.

Conclusion

In this article, we knew that the Double Question Mark (Nullish Coalescing Operator) returns the right expression if the left expression was ONLY null or undefined.

After then, we knew that it is a special case of the OR Logical Operator, as it considers 0, false, or "" as true values.

Finally, we introduced some use cases of the Nullish Coalescing Operator.