The nullish-coalescing operator
JavaScriptAll snippets in this category →
Posted on In JavaScript, we can use ||
to set default values for variables. This operator returns the first value if it is truthy and the second value otherwise.
Unfortunately, this does not only override null
and undefined
. It also overrides other falsy values like 0, false, and empty strings. Sometimes, these are valid values we want to keep.
The nullish-coalescing operator ??
only overrides null
and undefined
. It leaves all other falsy values intact.
27 || "default" // ⇒ 27 good
true || "default" // ⇒ true good
"truthy!" || "default" // ⇒ "truthy!" good
null || "default" // ⇒ "default" good
undefined || "default" // ⇒ "default" good
0 || "default" // ⇒ "default" bad (overrides real value)
false || "default" // ⇒ "default" bad (overrides real value)
"" || "default" // ⇒ "default" bad (overrides real value)
27 ?? "default" // ⇒ 27 good
true ?? "default" // ⇒ true good
"truthy!" ?? "default" // ⇒ "truthy!" good
null ?? "default" // ⇒ "default" good
undefined ?? "default" // ⇒ "default" good
0 ?? "default" // ⇒ 0 good (keeps real value)
false ?? "default" // ⇒ false good (keeps real value)
"" ?? "default" // ⇒ "" good (keeps real value)
27 || "default" // ⇒ 27 good
true || "default" // ⇒ true good
"truthy!" || "default" // ⇒ "truthy!" good
null || "default" // ⇒ "default" good
undefined || "default" // ⇒ "default" good
0 || "default" // ⇒ "default" bad (overrides real value)
false || "default" // ⇒ "default" bad (overrides real value)
"" || "default" // ⇒ "default" bad (overrides real value)
27 ?? "default" // ⇒ 27 good
true ?? "default" // ⇒ true good
"truthy!" ?? "default" // ⇒ "truthy!" good
null ?? "default" // ⇒ "default" good
undefined ?? "default" // ⇒ "default" good
0 ?? "default" // ⇒ 0 good (keeps real value)
false ?? "default" // ⇒ false good (keeps real value)
"" ?? "default" // ⇒ "" good (keeps real value)
27 || "default" // ⇒ 27 good
true || "default" // ⇒ true good
"truthy!" || "default" // ⇒ "truthy!" good
null || "default" // ⇒ "default" good
undefined || "default" // ⇒ "default" good
0 || "default" // ⇒ "default" bad (overrides real value)
false || "default" // ⇒ "default" bad (overrides real value)
"" || "default" // ⇒ "default" bad (overrides real value)
27 ?? "default" // ⇒ 27 good
true ?? "default" // ⇒ true good
"truthy!" ?? "default" // ⇒ "truthy!" good
null ?? "default" // ⇒ "default" good
undefined ?? "default" // ⇒ "default" good
0 ?? "default" // ⇒ 0 good (keeps real value)
false ?? "default" // ⇒ false good (keeps real value)
"" ?? "default" // ⇒ "" good (keeps real value)
27 || "default" // ⇒ 27 good
true || "default" // ⇒ true good
"truthy!" || "default" // ⇒ "truthy!" good
null || "default" // ⇒ "default" good
undefined || "default" // ⇒ "default" good
0 || "default" // ⇒ "default" bad (overrides real value)
false || "default" // ⇒ "default" bad (overrides real value)
"" || "default" // ⇒ "default" bad (overrides real value)
27 ?? "default" // ⇒ 27 good
true ?? "default" // ⇒ true good
"truthy!" ?? "default" // ⇒ "truthy!" good
null ?? "default" // ⇒ "default" good
undefined ?? "default" // ⇒ "default" good
0 ?? "default" // ⇒ 0 good (keeps real value)
false ?? "default" // ⇒ false good (keeps real value)
"" ?? "default" // ⇒ "" good (keeps real value)