loading...
Cover image for How to use the nullish coalescing operator (??) in Javascript

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

cilvako profile image Silvia Bogdan Updated on ・2 min read

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

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

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

Posted on Jun 26 by:

cilvako profile

Silvia Bogdan

@cilvako

Front-end developer by day, front-end developer by night. My dog is my biggest supporter.

Discussion

markdown guide
 

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.

 

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

 
 
 

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!

 

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.

 
 

Yes, it has a lot of nice additions.