The nullish coalescing operator was added to the standard ECMAScript specification in its 11th edition. I remember first seeing this operator ??
thinking what the heck is this and what problem does it solve? Is the ||
operator not good enough? Well, yes the ||
operator is great in certain use cases. But to understand why you might want to use the nullish coalescing operator instead you first have to remember how logical booleans work in Javascript.
In Javascript we use the double pipe ||
to represent the logical OR
operator. This operator performs boolean logic on two operands. If the first operand evaluates to true
then that value is returned otherwise the second operand is returned. In essence it return the first truthy value.
true | true // true
true || false // true
false || true // true
false || false // false
Great this all makes sense but what if we aren't comparing literal boolean values? What if we are comparing non-boolean values like strings
aka truthy
and falsy
values. In Javascript every type has an inherent Boolean value. And these values are commonly known as either truthy
or falsy
.
Truthy values include:
-
"0"
(a string containing a single zero) -
"false"
(a string containing the text "false") -
[]
(an empty array) - this one gets me all the time -
{}
(an empty object) - this one also -
function(){})
(an empty function)
Falsy values include:
-
false
-
0
(zero) -
-0
(minus zero) -
0n
(BigInt
zero) -
""
(empty string) null
undefined
-
NaN
Some examples using the ||
operator with truthy/falsy values
const someString = "I'm a string"
const emptyString = ""
someString || "I'm also a string" // "I'm a string"
emptyString || someString // "I'm a string"
"false" || true // "false"
[] || someString // []
undefined || someString //"I'm a string"
"" || someString //"I'm a string"
Unlike the ||
operator that returns the first truthy value, the nullish coalescing operator returns the first defined value.
For example:
const brandyOrMonica;
brandyOrMonica ?? "Brandy" // Brandy
# HOWEVER
const brandyOrMonica = "Brandy"
brandyOrMonica ?? "Monica" // Brandy
In the first example, brandyOrMonica
is declared undefined
. So the nullish coalescing operator will return the second operand Brandy
. This is similar to the way the ||
operator would work also. However, You can think of the nullish coalescing
as a way to set a default value for a value that might be either null
or undefined
. In my opinion the real power of the nullish coalescing
operator is revealed when the first operand is a falsy
value. The ||
operator doesn't distinguish between false
, 0
, an empty string ""
and null/undefined
- they're all considered falsy
values. If any of these is the first operand of ||
, then the second operand will be returned. Nullish coalescing
allows developers to set a default value only when the first operand is null/undefined
const numberOfRoundsInAVersuzBattle = 0;
numberOfRoundsInAVersuzBattle || 20; // 20
numberOfRoundsInAVersuzBattle ?? 20; // 0
That's it.
Td;lr - The ||
operator returns the first truthy value, the nullish coalescing
operator returns the first defined value.
Top comments (0)