What is a nullish coalescing operator (??) in JavaScript?

The nullish coalescing operator is a logical operator that can be extremely powerful that could make our lives lot easier in some cases. And with this, we can write the most efficient logic.

ES11 introduced the nullish coalescing operator denoted by the double question marks (??).

Syntax:

The operator is written as two question marks ??.

The syntax of the Nullish coalescing operator is,

leftExpr ?? rightExpr

Here are the examples of how operator works,

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

null ?? 'test' // returns 'test'
undefined ?? 56 // returns 56
null ?? 0 // returns 0
45 ?? 25 // returns 45

How it works?

Consider the below example of the operator. The nullish coalescing operator is a logical operator that accepts two values:

const result = value1 ?? value2

The above statement returns the second value (value2) if the first value (value1) is null or undefined. Or else, it will return the first value (value1).

Technically, the above logic is equivalent to the following block:

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}

In other words,

Let’s assume null and undefined as similar in this context and assume ‘defined’ as something that is not null or undefined

We can define our example as something like this,

The result of value1 ?? value2 is,

If value1 is defined, then return value1
If value1 is not defined, then return value2

Let’s look at more examples of Nullish coalescing operator.

In the below example, we have null in the first value and the string in the second value. Since we have null in the first value, the second value (‘default string’)is returned.

const nullValue = null;
const foo = nullValue ?? ‘default string’;
console.log(foo);
// expected output: “default string”

Let’s look at one more example where the first value is returned.

const someNumber = 42;
const valC = someNumber ?? 0;
console.log(valC);
// expected output: “42”

Since we have a number in the first string, the first value(someNumber or 42) is returned.

Consider the below example, Note that the first value needs to be null or undefined for the ??operator to return the second value. Empty string or 0 is not considered.

const emptyText = ""; // falsy
const valB = emptyText ?? "default for B";
console.log(valB); // "" (as the empty string is not null or undefined)

How is it different from logical OR (||) operator?

The OR (||) operator can be used in the same way as ?? . We can get the same results for the above examples.

But,

there is one difference between || and ??.

|| returns the first truthy value.
?? returns the first defined value.
In other words, || doesn’t distinguish between the below values (falsy)

• false
• 0
• an empty string (“”)
• null
• undefined

They are called – falsy values. If any of these is the first argument of ||, then we’ll get the second argument as the result.

0 || 2 // returns 2
0 ?? 2 // returns 0

where as ?? considers only null and undefined unlike ||.

Conclusion:

And that’s how ??operator works. Comment below if you have used this operator in your code. Thank you.