Here, in this article, we’ll say that an expression is “defined” when it’s neither null
nor undefined
.
The nullish coalescing operator is written as two question marks ??
.
The result of a ?? b
is:
- if
a
is defined, thena
, - if
a
isn’t defined, thenb
.
In other words, ??
returns the first argument if it’s not null/undefined
. Otherwise, the second one.
The nullish coalescing operator isn’t anything completely new. It’s just a nice syntax to get the first “defined” value of the two.
We can rewrite result = a ?? b
using the operators that we already know, like this:
result = (a !== null && a !== undefined) ? a : b;
The common use case for ??
is to provide a default value for a potentially undefined variable.
For example, here we show Anonymous
if user
isn’t defined:
let user;
alert(user ?? "Anonymous"); // Anonymous
Of course, if user
had any value except null/undefined
, then we would see it instead:
let user = "John";
alert(user ?? "Anonymous"); // John
We can also use a sequence of ??
to select the first value from a list that isn’t null/undefined
.
Let’s say we have a user’s data in variables firstName
, lastName
or nickName
. All of them may be undefined, if the user decided not to enter a value.
We’d like to display the user name using one of these variables, or show “Anonymous” if all of them are undefined.
Let’s use the ??
operator for that:
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
// shows the first defined value:
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
Comparison with ||
The OR ||
operator can be used in the same way as ??
, as it was described in the previous chapter.
For example, in the code above we could replace ??
with ||
and still get the same result:
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
// shows the first truthy value:
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
The OR ||
operator exists since the beginning of JavaScript, so developers were using it for such purposes for a long time.
On the other hand, the nullish coalescing operator ??
was added to JavaScript only recently, and the reason for that was that people weren’t quite happy with ||
.
The important difference between them is that:
||
returns the first truthy value.??
returns the first defined value.
In other words, ||
doesn’t distinguish between false
, 0
, an empty string ""
and null/undefined
. They are all the same – falsy values. If any of these is the first argument of ||
, then we’ll get the second argument as the result.
In practice though, we may want to use default value only when the variable is null/undefined
. That is, when the value is really unknown/not set.
For example, consider this:
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0
- The
height || 100
checksheight
for being a falsy value, and it really is.- so the result is the second argument,
100
.
- so the result is the second argument,
- The
height ?? 100
checksheight
for beingnull/undefined
, and it’s not,- so the result is
height
“as is”, that is0
.
- so the result is
If the zero height is a valid value, that shouldn’t be replaced with the default, then ??
does just the right thing.
Precedence
The precedence of the ??
operator is rather low: 5
in the MDN table. So ??
is evaluated before =
and ?
, but after most other operations, such as +
, *
.
So if we’d like to choose a value with ??
in an expression with other operators, consider adding parentheses:
let height = null;
let width = null;
// important: use parentheses
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000
Otherwise, if we omit parentheses, then as *
has the higher precedence than ??
, it would execute first, leading to incorrect results.
// without parentheses
let area = height ?? 100 * width ?? 50;
// ...works the same as this (probably not what we want):
let area = height ?? (100 * width) ?? 50;
Using ?? with && or ||
Due to safety reasons, JavaScript forbids using ??
together with &&
and ||
operators, unless the precedence is explicitly specified with parentheses.
The code below triggers a syntax error:
let x = 1 && 2 ?? 3; // Syntax error
The limitation is surely debatable, but it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch to ??
from ||
.
Use explicit parentheses to work around it:
let x = (1 && 2) ?? 3; // Works
alert(x); // 2
Summary
-
The nullish coalescing operator
??
provides a short way to choose the first “defined” value from a list.It’s used to assign default values to variables:
// set height=100, if height is null or undefined height = height ?? 100;
-
The operator
??
has a very low precedence, only a bit higher than?
and=
, so consider adding parentheses when using it in an expression. -
It’s forbidden to use it with
||
or&&
without explicit parentheses.
Comments
<code>
tag, for several lines – wrap them in<pre>
tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)