Kodeclik Blog

Javascript’s double question mark (??)

The JavaScript double question mark ?? is called the nullish coalescing operator. It is a logical operator that returns the right-hand value if the left-hand value is null or undefined, otherwise it returns the left-hand value. The nullish coalescing operator is useful when we want to provide a default value for a variable or expression that may be null or undefined.

Let us look at some examples of where we can use the nullish coalescing operator:

Example 1: Providing default values

We can use the nullish coalescing operator to provide default values for variables or expressions that may be null or undefined. For example consider the below code:

const name = null;
const defaultName = name ?? "Guest";
console.log(defaultName); // "Guest"

In this example, we use the nullish coalescing operator to provide a default value of "Guest" for the name variable, which is null.

Example 2: Checking for object properties

We can use the nullish coalescing operator to check for the existence of object properties that may be null or undefined. For example:

const user = {
  name: "John",
  age: null
};
const userName = user.name ?? "Unknown";
const userAge = user.age ?? "Unknown";
console.log(userName); // "John"
console.log(userAge); // "Unknown"

Example 3: Handling function arguments

We can use the nullish coalescing operator to handle function arguments that may be null or undefined. For example:

function greet(name) {
  name = name ?? "Guest";
  console.log('Hello, \${name}!');
}
greet(); // "Hello, Guest!"
greet("John"); // "Hello, John!"

In this example, we use the nullish coalescing operator to provide a default value of "Guest" for the name argument of the greet() function if it is null or undefined.

In general as the examples show, we can use the nullish coalescing operator in many other situations where we need to handle null or undefined values in a concise and readable way. But you might wonder:

Doesn’t the OR operator do the same thing as the nullish coalescing operator?

Actually, no. The OR operator (||) does not do the same thing as the nullish coalescing operator (??). While both operators can be used to provide default values, they behave differently when the left-hand side is a falsy value other than null or undefined. The OR operator returns the right-hand value if the left-hand value is falsy, which can include empty strings, 0, NaN, and false. The nullish coalescing operator only returns the right-hand value if the left-hand value is null or undefined.

Here are three different examples of where we can use the nullish coalescing operator instead of the OR operator:

Example 4: Providing default values for empty strings

We can use the nullish coalescing operator to provide default values for variables or expressions that may be empty strings. For example:

const name = "";
const defaultName = name ?? "Guest";
console.log(defaultName); // ""

In this example, we use the nullish coalescing operator to return the name variable if it is not an empty string, otherwise we return the default value of "Guest". If we used the OR operator instead, the default value would be returned even if name was an empty string.

Example 5: Checking for object properties that are 0

We can use the nullish coalescing operator to check for the existence of object properties that may be 0. For example:

const user = {
  name: "John",
  age: 0
};
const userName = user.name ?? "Unknown";
const userAge = user.age ?? "Unknown";
console.log(userName); // "John"
console.log(userAge); // 0

In this example, we use the nullish coalescing operator to check for the existence of the name and age properties of the user object. The name property exists, so its value is returned. The age property is 0, which is a falsy value, but the nullish coalescing operator returns it because it is not null or undefined. If we used the OR operator instead, the default value would be returned for age.

Example 6: Handling function arguments that are 0

Finally, we can use the nullish coalescing operator to handle function arguments that may be 0. For example:

function greet(name) {
  name = name ?? "Guest";
  console.log('Hello, \${name}!');
}
greet(); // "Hello, Guest!"
greet("John"); // "Hello, John!"
greet(0); // "Hello, 0!"

In this example, we use the nullish coalescing operator to provide a default value of "Guest" for the name argument of the greet() function if it is null or undefined. If we used the OR operator instead, the default value would be returned for name if it was 0.

In summary, we can use the nullish coalescing operator in situations where we want to provide default values for variables or expressions that may be null or undefined, but not for other falsy values.

If you liked this blogpost and want to learn more about validating values, see our blogpost on Javascript trimEnd(). Also checkout our blogpost on how to create comments in your Javascript programs. Also learn about the multiple uses of question marks in Javascript.

Want to learn Javascript with us? Sign up for 1:1 or small group classes.