The nullish coalescing operator (??) is a logical operator that takes two arguments. It returns the right-hand side operand when its left-hand side operand is null or undefined. otherwise, it returns its left-hand side operand.
Table of Contents
Syntax
1 2 3 | leftExpr ?? rightExpr |
If leftExpr is not null or undefined, then returns leftExpr
if leftExpr is either null or undefined, then returns rightExpr
Example
In the following code, since email is undefined, the ?? returns the "No Email Selected".
1 2 3 4 5 6 7 | let email let selecteditem = email ?? "No Email Selected"; console.log(selecteditem) //No Email Selected |
If the email already has a value, it returns the email.
1 2 3 4 5 6 7 | let selecteditem = email ?? "No Email Selected"; |
If the email has any other value other than null or undefined, it returns the email. Even if it is zero or empty string etc.
1 2 3 4 5 6 7 8 9 10 | let email="" let selecteditem = email ?? "No Email Selected"; console.log(selecteditem) //"" email="0" selecteditem = email ?? "No Email Selected"; console.log(selecteditem) // 0 |
Difference with ||
You can also make use of the logical OR operator. Because null & undefined are falsy values.
1 2 3 4 5 6 7 8 9 10 | let email let selecteditem = email || "No Email Selected"; console.log(selecteditem) //No Email Selected email="[email protected]" selecteditem = email || "No Email Selected"; |
But, if email, has other falsy values like false, 0,-0 , 0n, "", NaN, then the || & ?? produces different outputs.
1 2 3 4 5 6 7 8 9 | let email="" let selecteditem = email || "No Email Selected"; console.log(selecteditem) //No Email Selected selecteditem = email ?? "No Email Selected"; console.log(selecteditem) //"" |
Difference with Conditional Operator
We can mimic the ?? using the Ternary Conditional Operator.
1 2 3 4 5 | let email let selecteditem = (email != undefined || email != null ) ? email: "No Email Selected" console.log(selecteditem) //No Email Selected |
Assiging Default Values
One of the use cases of the ?? operator is assigning the default value.
We usually use the || to assign a default value. In the following example, we have not given any value to score. Hence it is undefined. Both the || & ?? does not return the score, but prints the message “Please enter your score”
1 2 3 4 5 6 7 8 | let score; console.log(score|| "Please enter your score") //Please enter your score console.log(score?? "Please enter your score") //Please enter your score |
Now, assume that the user entered his score as 0, which is a valid score. But the || operator still returns the message “Please enter your score”, because 0 is false. But the ?? returns the score correctly.
1 2 3 4 5 6 7 8 | score=0 console.log(score || "Please enter your score") //Please enter your score console.log(score ?? "Please enter your score") //0 |
Short-circuiting
?? like || & && operators, stops evaluating if the left-hand operand is not null/undefined. Hence the right-hand expression is not evaluated.
For Example, the following code evaluates the getNumber and values of a becomes 11.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let a=10 function getNumber() { a=a+1 return a; } let b = ( null ?? getNumber() ) getNumber() not invoked console.log(a); //11 |
But, here the ?? returns with the string ‘Hello’ and getNumber() is never invoked. The value of a remains at 10.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let a=10 function getNumber() { a=a+1 return a; } let b = ( "Hello" ?? getNumber() ) //getNumber() is not invoked console.log(a); //10 |
Reference
Read More
- JavaScript Tutorial
- JavaScript Operators
- Arithmetic Operators
- Unary plus (+) & Unary minus (-)
- Increment & Decrement Operators
- Comparison or Relational Operators
- Strict Equality & Loose Equality Checker
- Ternary Conditional Operator
- Logical Operators
- Bitwise Operators
- Assignment Operators
- Nullish Coalescing Operator
- Comma Operator
- Operator Precedence
