What is JavaScript double question mark (??) — nullish coalescing operator

4 min readAug 24, 2023

If you look through the JavaScript code, you may find an expression that uses a double question mark (??), as in the following code:

The double question mark is a logical operator that returns the expression to the right of the query if the expression is flipped to the left is null or undefined.

This operator is also known as the null coalescence operator. This is a new feature introduced in JavaScript ES2020 that allows you to search for null or undefined values more accurately.

Nullish Coalescing Operator syntax

The syntax of the null coalescence operator is very simple. It contains of two question marks ?? placed between two expressions.

Here’s an example:

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

The preceding code assigns the value of the variable firstName to the value of the variable username.

If the value of firstName is null or undefined , the value Guest will be assigned:

Can be write in this way also:

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

As you can see, an if-else statement is not needed to check for null or undefined values.

Why JavaScript needed this operator?

The null coalescing operator was created as an improved alternative to the OR operator ||.

The OR operator was originally created to provide a default value or fallback when l expression based on the left side is false or returns false.

But after some practice it becomes clear that there are times when developers want to return values that are considered both false and valid, such as 0 and an empty string (“ ”)

Using the OR operator prevents incorrect values from being returned. Consider the following example:

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

// When you use OR operator:
username = firstName || "Guest";
console.log(username); // "Guest"

When using the null union operator, only exactly zero and undefined values are replaced with the value to its right.

The Nullish Coalescing Operator can be used with any type of value, including numbers, strings, and objects.

Several use cases for the Nullish Coalescing Operator

The null operator coalesces is useful in several situations where you need to check the following: null or undefined values and provide a template.

Find several examples

Handling missing function arguments

When When When a function is called, some arguments can be omitted.

The nullish coalescence operator can be used to supply default values for a missing argument like this:

function greet(name) {
  console.log(`Hello, ${name ?? "Guest"}!`);
}

greet(); // 'Hello, Guest!'
greet("John"); // 'Hello, John!'

Accessing object properties

When When When when working with objects, a property may not exist or may be undefined.

The Nullish coalescing operator can be used to safely access object properties and provide a default value when the property is missing:

let user = { name: "John Doe" };
let email = user.email ?? "N/A";
console.log(email); // 'N/A'

Choosing between a variable and a constant

You may want to select the value of a variable or constant if the variable null or undefined:

let value = null;
const defaultValue = 'Default';

let result = value ?? defaultValue;

console.log(result); // 'Default'

Like it when see the nullish coalescing operator, it’s a cool feature that can make your code more concise and reliable.

Using ?? with || and && operators

For security reasons, the double question mark cannot be used together with JavaScript OR (||) and AND (&& ). no parentheses () separating operators.

For example, the following code tries to check if the variable firstname or lastname can be used as the username value before using “guest “ as value:

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

console.log(username);

This is because JavaScript cannot determine which operator to evaluate first. To clarify precedence of votes use parentheses are mandatory.

The following code evaluates expressions before in brackets:

let firstName = null;
let lastName = undefined;
let username = (firstName || lastName) ?? "Guest";

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

It is as if the coalescence operator null was combined with the AND or OR operator.

Conclusion

The JavaScript double question mark is also known as the Nullish Coalescing Operator. It is a logical operator that simply returns the expression on the right if the expression on the left is null or undefined.

The Nullish Coalescing Operator is an extended OR operator that allows you to return 0 and an empty string “” as valid values for your application.

This item will show also some examples where the Nullish Coalescing Operator is useful.