1. Introduction

In this tutorial, we’ll discuss nullish coalescing operator. Nullish coalescing operator is written as double question marks (??).

The syntax of nullish coalescing operator is:

leftExpression ?? rightExpression

Nullish coalescing operator works in the following manner:

• return leftExpression if not null or undefined.
• return rightExpression if null or undefined.

nullish coalescing operator is short and convenient form of the following expression:

result = (a !== null && a !== undefined) ? a : b;

Following is an example of nullish coalescing operator:

const foo = null ?? 'default string';

Another example:

const result1 = null ?? "default value"; // default value
const result2 = undefined ?? "default value"; // default value
const result3 = "hello" ?? "default value"; // hello

Nullish coalescing operator is commonly used to assign default value for a potentially undefined variable.

2. Comparison of ?? with ||

Before nullish coalescing operator, OR operator (||) was used for the same purpose.

let value1 = null;
let value2 = undefined;
let value3 = "default value";
console.log(value1 || value2 || value3); // default value

You’ll not see much difference between OR operator and null coalescing operator. However, there is one big difference due to which programmers wanted a new operator.

The important difference between OR and Nullish coalescing operator is:

• || returns the first truthy value.
• ?? returns the first value which is not null or undefined.

OR operator does not differentiate between 0, false, empty string(“”), null and undefined.

let value = 0;

console.log(value || 10);  //10
console.log(value ?? 10);  //0

Since OR operator returns first truthy value and 0 is treated as falsy, result of (value || 10) is 10.
Since nullish coalescing operator returns first value which is not null or undefined, result of (value ?? 10) is 0.

3. Short-circuiting

We know about the short-circuiting in case of OR and AND operators. Similar is the short-circuiting in case of null coalescing operator.

Right expression is not evaluated if the first expression is null or undefined.

function one() {
  console.log("one was called");
  return undefined;
}
function two() {
  console.log("two was called");
  return false;
}
function three() {
  console.log("three was called");
  return "test";
}
console.log(one() ?? three());

console.log(two() ?? three());

Output

one was called
three was called
test
two was called
false 

4. Chaining with AND or OR operators is not allowed

Combining both the AND (&&) and OR operators (||) with ?? is not allowed. SyntaxError will be thrown if you try to do so.

null || undefined ?? "test"; // SyntaxError
true || undefined ?? "test"; // SyntaxError

SyntaxError can be avoided by explicitly defining precedence by using parenthesis.

(null || undefined) ?? "test"; // test
(true || undefined) ?? "test"; // true

5. Precedence

The nullish coalescing operator has the fifth-lowest operator precedence. Its precedence is lower than the OR operator (||). The nullish coalescing operator ?? is evaluated before assignment operations but after other operators like =, -, *.

It is recommended to use parentheses if you want to define precedence explicitly. For example:

 (null || undefined) ?? "default value"; //default value

6. Conclusion

In this tutorial, we discussed nullish coalescing operator and it usage. We also discussed its precedence. This operator is very helpful in writing concise code. This operator is introduced recently. You may not find this operator in old JavaScript code. It is better to upgrade your knowledge and update your code.

We hope this tutorial was informative. Happy learning!