JavaScript double question mark (nullish coalescing) operator explained

A guide on how JavaScript double question marks works

Posted on May 20, 2021


When you’re inspecting JavaScript code, you may find an expression using a double question mark (??) as in the code below:

alert(username ?? "Guest");

The double question mark operator is called the nullish coalescing operator, and it’s a new feature of JavaScript ES2020 that allows you provide a default value to use when a variable expression evaluates to null or undefined.

The nullish coalescing operator simply returns the expression on the right-side of the mark when the expression on the left side is null or undefined.

For example, the following code will assign the firstName variable value as the value of username variable. When the firstName value is null, the username will be assigned as "Guest":

let firstName = null;
let username = firstName ?? "Guest";
console.log(username); // "Guest"

Or you can also write it this way:

let username = undefined ?? "Guest";
console.log(username); // "Guest"

Unlike the JavaScript operator OR (||) the nullish coalescing operator won’t replace false values with the right-side expression. One example of this is when you pass an empty string ("") as the left side expression.

JavaScript evaluates an empty string to false as in the code below:

let firstName = ""; // empty string evaluates to false in JavaScript
let username = firstName ?? "Guest";
console.log(username); // ""

The nullish coalescing operator was created because there will be times when you want to consider falsy values like 0 and empty string "" to be valid values. The use of OR operator will prevent you from returning any falsy values.

By using the nullish coalescing operator, you will only replace exactly null and undefined values with a defined value.

Using ?? with || and && operators

For safety reasons, the double question mark can’t be used together with JavaScript OR (||) and AND (&&) operators without a parentheses () separating the operators.

For example, the following code tries to see if either firstName or lastName variable can be used as the value of username before using "Guest" as its value:

let firstName = "John";
let lastName = "Stone";
let username = firstName || lastName ?? "Guest"; // Error: Unexpected token '??'

console.log(username);

This is because JavaScript won’t be able to determine which operator it needs to evaluate first. You need to use parentheses to clearly indicate the priority of the evaluations.

The following code will first evaluate the expressions inside the parentheses:

let firstName = null;
let lastName = undefined;
let username = (firstName || lastName) ?? "Guest"; // Error: Unexpected token '??'

console.log(username); // "Guest"

And that’s how you combine the nullish coalescing operator with either AND or OR operator.

Conclusion

The JavaScript double question mark is also known as the nullish coalescing operator. It’s an operator that simply returns the right-side expression when the left side expression is either null or undefined.

Unlike the OR operator, the nullish coalescing operator is a situational operator that allows you to return 0 and empty string "" as a valid value for your application.

Don’t forget to use a parentheses when you combine it with AND / OR operator 😉

Related articles:

Grab the free JavaScript book today 👍

Learn the building blocks of JavaScript programming language like data types, functions, objects, arrays and classes.

Use the knowledge from the book to build a small but solid program.

Learn more