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.
Top comments (0)