Nullish coalescing is a new operator in JavaScript that provides a shorter syntax for the common use case of providing a default value when a variable is null or undefined.

In the past, the logical OR operator ( || ) has been used for this purpose. However, this can lead to unexpected results when the variable being checked is not actually null or undefined, but falsey. For example:

let foo;

console.log(foo || 'default'); // 'default'

console.log(false || 'default'); // 'default'

console.log('' || 'default'); // 'default'

With nullish coalescing, we can be more explicit about when we want to use a default value:

let foo;

console.log(foo ?? 'default'); // undefined

console.log(false ?? 'default'); // false

console.log('' ?? 'default'); // ''

Nullish coalescing provides a way to fall back to a default value if a given value is null or undefined.

How is nullish coalescing different from || operator?


The || operator is a logical OR operator. It returns true if either of the operands is true. Nullish coalescing is similar to the || operator, but with two important differences:

  1. It doesn't treat falsey values like 0 or '' as defaults.
  2. It doesn't short-circuit the evaluation, meaning that if the first value is null, the second value will still be evaluated.

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.


This operator is useful for providing default values for variables that may be undefined. For example, the following code defines a variable named userName, and assigns a default value of "Anonymous" if the userName variable is undefined:

var userName = null ?? "Anonymous";

If the userName variable is defined and is not null, the ?? operator will return the userName variable's value. Otherwise, it will return the string "Anonymous".

Why nullish coalescing is useful

Nullish coalescing can be especially useful in cases where we want to distinguish between a variable that is explicitly set to null and one that is undefined.

For example, consider the following code:

function getUserName(user) {
  return user.name ?? 'default';
}

console.log(getUserName({ name: 'John' })); // 'John'

console.log(getUserName({ name: null })); // null

console.log(getUserName({})); // 'default'

console.log(getUserName()); // 'default'

In the first two cases, the user object has a name property, but its value is either John or null.

With nullish coalescing, we can distinguish between these two cases.

In the third case, the user object does not have a name property, so the result is undefined. And in the fourth case, there is no user object at all, so the result is also undefined.

Downside of using nullish coalescing

One potential downside of using the nullish coalescing operator is that it may make code more difficult to read. For example, the following code uses the nullish coalescing operator to conditionally log a message:

console.log(userName ?? "User is anonymous");

This code is equivalent to the following code, which does not use the nullish coalescing operator:

if (userName == null) { 
    console.log("User is anonymous"); 
} else { 
    console.log(userName); 
}

The code that uses the nullish coalescing operator is shorter, but it may be less clear to someone reading the code.

Writing concise code with nullish coalescing

Nullish coalescing is a useful addition to JavaScript that can help make our code more concise and explicit. It allows you to check for null values and return an alternative value if one is not found. This is especially useful when working with data that may be missing or incomplete.

If a variable is nullish ( null or undefined ), coalescing can be used to provide a default value. For example, instead of checking if a variable is undefined and then providing a default value, you can use coalescing to do this in one line:

 const myVariable = someValue ?? 'default value';

Nullish coalescing is a useful operator in JavaScript that can help to simplify code. It allows for a default value to be returned if the operand is null or undefined, which can be helpful when dealing with data that may be missing or incomplete. When used correctly, nullish coalescing can help to make code more readable and easier to maintain.

Share this post