DEV Community

Cover image for How to use the nullish coalescing operator (??) in Javascript
Arika O
Arika O

Posted on • Updated on

How to use the nullish coalescing operator (??) in Javascript

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Simply put, the nullish coalescing operator let's us truly check nullish values instead of falsey values. In JavaScript, a lot of values are falsey, like the number zero, an empty string, undefined, null, false, NaN etc.

Check the code below:

console.log(NaN ? "truthy" : "falsy"); // falsy
console.log("" == false); // true
console.log(0 == false); // true
console.log(null ? "truthy" : "falsy"); // falsy
console.log(undefined ? "truthy" : "falsy"); // falsy
console.log(false == false); //true
console.log(-0 == false); // true
console.log(document.all ? "truthy" : "falsy"); // falsy

// NaN, undefined and null are not really false
console.log(NaN == false); //false
console.log(undefined == false); // false
console.log(null == false); // false
console.log(document.all == false); // false

Enter fullscreen mode Exit fullscreen mode

NaN, undefined, null and document.all are not really equal to false but they are falsey, that's why I didn't make a check against false and I used a condition instead.

With this in mind, let's now look at some examples in which we'll first use the OR operator and then the nullish operator:

// using the logical OR (||) operator

const or_printSomething_1 = null || "random string";
console.log(or_printSomething_1); // prints "random string"

const or_printSomething_2 = undefined || "another random string";
console.log(or_printSomething_2); // prints "another random string"

const or_printSomething_3 = 0 || "what? another string?";
console.log(or_printSomething_3); // prints "what? another string?"

const or_printSomething_4 = false || "ok? too many strings!";
console.log(or_printSomething_4); // prints "ok? too many strings!"

// using the logical nullish (??) operator

const nullish_printSomething_1 = null ?? "random string";
console.log(nullish_printSomething_1); // prints "random string"

const nullish_printSomething_2 = undefined ?? "another random string";
console.log(nullish_printSomething_2); // prints "another random string"

const nullish_printSomething_3 = 0 ?? "what? another string?";
console.log(nullish_printSomething_3); // prints 0

const nullish_printSomething_4 = false ?? "ok? too many strings!";
console.log(nullish_printSomething_4); // prints false

Enter fullscreen mode Exit fullscreen mode

As you can see, when using ||, the left side is always evaluated to false and the right side gets printed to the console. When using ?? and the left side is equal to undefined or null, only then the right side is returned.

Being a feature of ES2020, the nullish coalescing operator is not fully supported by all browsers, so you can check for compatibility here.

Image source: Startup Stock Photos/ @startup-stock-photos on Pexels

Top comments (10)

eljayadobe profile image

Two more falsy values, -0 (I know, that's a technicality), and in HTML the object document.all.

And just for sake of completeness, new Boolean(false) object is truthy, as are all objects except for document.all.

arikaturika profile image
Arika O

Thank you for the remark, I will edit in a bit. To be honest, I never used document.all in a boolean context :).

anshcena profile image


ansmtz profile image
ansmtz • Edited

Just to recap, null coalescing is operator that works almost like a logical OR, but deals only with nullish values, which only null and undefined.

Thanks for your examples!

arikaturika profile image
Arika O

Exactly. Only if what's on the left side is 'null or undefined, it returns the right side of the evaluation. I hope it helped.

mouhcinekatir profile image
mouhcine Katir

Thanks !

lagsurfer profile image

ES2020 is 🔥

arikaturika profile image
Arika O

Yes, it has a lot of nice additions.

starpebble profile image

This will work with our numbers.

arikaturika profile image
Arika O

Which numbers?