Nullish Coalescing Operator
The nullish coalescing operator, though spelling the name is quite difficult but it is very easy to understand. ES2020 introduced the nullish coalescing operator which is a logical operator and accepts two values:
leftExpr ?? rightExpr
- Nullish Coalescing Operator is denoted using ??.
How Nullish Coalescing Operator Works
The nullish coalescing operator returns the right-hand side operand if the left-hand side operand is null
or undefined
.
Let us see the below code:
const name = "Priyanka"
const age = null;
console.log(age ?? name) // output: Priyanka
console.log(undefined ?? 0) //output: 0
In the above example, both the outputs are same.
In first statement, left-hand side operand is
null
so the output should be right-hand side operand i.e. Priyanka.In second statement, left-hand side operand is
undefined
so the output should be right-hand side operand i.e. 0.
Why Nullish Coalescing Operator
This working of this logical operator is very simple. This can seen as a special case of short circuiting OR operator.
Let us briefly discuss short circuiting OR operator:
OR operator is evaluated from left to right and returns the right-hand side operand if the left-hand side operand is any falsy value (0, โโ, [], null, undefined, NaN) , not only null
or undefined
.
Let us understand OR operator with the help of below code:
const name = "Priyanka";
const otherName = "New User";
console.log("My name is ", name || otherName) // output: My name is Priyanka
const newName = "";
console.log("Hello", newName || otherName ) // output: Hello, New User
In the above example:
There was truthy value (name) in the left-hand side so it returned that value and right-hand side is not even evaluated.
There was falsy value ('') in the left-hand side so it evaluated right-hand side and returned that value.
However, the logical OR operator sometimes confuses if you consider 0
or empty strings ''
as a valid value. Consider below example:
let counter = 0;
let result = console.log(counter || 1); // output: 1
Here, counter value is a valid value not a falsy value but still we get 1 as an output. To avoid this pitfall, nullish coalescing operator comes into picture.
It only returns the second value when the first one is either null
or undefined
.
let counter = 0;
let result = console.log(counter ?? 1); // output: 0
Chaining with nullish coalescing operator.
Multiple statements can be chained using nullish coalescing operator.
const printFullName = null ?? undefined ?? "Priyanka Prajapati"
console.log(printFullName) // output: Priyanka Prajapati
In the above code, we have chained two operators.Let's understand what happened in the above code:
Considering the first operator, left-hand side operand is
null
, so it will return the right-hand side value which isundefined
.For the second operator, the result of first operator becomes the left-hand side operand, which is
undefined
, so it will return the right-hand side value which is Priyanka Prajapati.
Chaining with the AND or OR operator
We cannot combine AND or OR operator directly with the nullish coalescing operator, it will give SyntaxError
const printFullName = null || undefined ?? "Priyanka Prajapati"
console.log(printFullName) // output: SyntaxError: missing ) after argument list
But this error can be avoided by wrapping the expression on the left of the ?? operator in parentheses to explicitly specify the operator precedences:
const printFullName = (null || undefined) ?? "Priyanka Prajapati"
console.log(printFullName) // output: Priyanka Prajapati
Conclusion
This was all about the Nullish Coalescing Operator. If you've reached this point, Thanks for taking your time and reading this article, hope you've enjoyed reading it and found it helpful. Do not hesitate to share your feedback.
Happy Learning !! ๐