TypeScript 3.7 added support for the
?? operator, which is known as the nullish coalescing operator. We can use this operator to provide a fallback value for a value that might be
The nullish coalescing operator works with the first defined value. In other words, the?? operator returns the first argument if it’s not null or undefined.
Let’s take for example:
a ?? b
If a is defined, then a would be returned. But if a is not defined, then b would be returned.
The nullish coalescing operator is just a syntax that gets the first “defined” value of the two.
Let us see another example of how the ?? works
let userFirstName; alert(userFirstName ?? "Anonymous");
In the example above, userFirstName wasn’t defined, therefore it outputs “Anonymous”.
Now let us assign a name-value to userFirstName
let userFirstName = "Katherine"; alert(userFirstName ?? "Anonymous");
The output in the code above would be “Katherine” because the first argument which is userFirstName is defined.
Meanwhile, the OR operator || can also be used in the same way the ?? nullish coalescing operator is used. The || operator shows the first truthy value.
For example, let us check for any available items needed at the grocery store...
let toiletPaper = null; let beverages = null; let sparklingWater = "Available"; alert(toiletPaper || beverages || sparklingWater || "No item available ");
The output of the alert would be “Available” since one of the three items is available.
The code above shows the first truthy value which is similar to the way the ?? operator works.
What is the difference between the OR || operator and the ?? nullish coalescing operator
The major difference between them is that ;
- ?? operator returns the first “defined” value while
- || operator returns the first “truthy” value
Let’s take, for example, the height of an object…
let height = 0; //using the || operator alert(height || 100);
When you output the example code above, the|| operator treats the height as a falsy value because it is set to “0” and therefore output “100”.
let height = 0; //using the ?? operator alert(height ?? 100);
The ?? operator checks if height is defined or not. Since height is defined (i.e assigned a value which is “0”), the result would be “0” as the?? operator returns the first defined value.
The `` height = 0; `` is a valid value. It should not be replaced with the default or interpreted as a false value.
For reasons like this, the nullish coalescing operator ?? is preferred in such cases.
To use the ?? operator with other operators such as *, &&, or ||, the expression has to be in parentheses to avoid getting incorrect results.
For example, the code below would output an error because expressions are not explicitly placed in parentheses…
let x = 2 && 4 ?? 3; alert(x); //output would be “syntax error”
But if we explicitly place the expression in parentheses, we would get a valid result;
let x = (2 && 4) ?? 3; alert(x); //output is 4
The nullish coalescing operator ?? provides a simple and precise way to choose the first “defined” value from a list or an expression.
The ?? operator has very low precedence ( a bit higher than ? and = ), so you should consider adding parentheses when using it in an expression.