Nullish Coalescing Operator

The nullish coalescing operator is represented by two question marks ??

It treats null and undefined in the same way, we’ll use a special term in this article. To save space, we’ll say a value is “defined” when it is neither null nor undefined.

The outcome of a?? b is:

  • if a is defined, then a,
  • if a isn’t defined, then b.

In other words, if the first argument is not null or undefined, ?? returns it. Otherwise, go with the second option.

The nullish coalescing operator is not a new concept. It’s simply a  syntax for obtaining the first “defined” value of the two.

We can rewrite result = a ?? b using familiar operators, such as this:

result = (a !== null && a !== undefined) ? a : b;

It should now be crystal clear what ?? does. Let’s see how it goes.

The most common application of  ?? is to provide a default value.

For example, in this case, we display “user” if its value is not null/undefined; otherwise, Anonymous:

let user;

alert(user ?? "Anonymous"); // Anonymous (user not defined)

Here’s an example of a user with a name:

let user = "Niki";

alert(user ?? "Anonymous"); // Niki(user defined)

We can also use a ?? sequence to select the first non-null/undefined value from a list.

Assume we have a user’s data in variables such as FirstName, LastName, or NickName. If the user chooses not to fill in the corresponding values, all of them may be undefined.

We’d like to show the user name if one of these variables is null/undefined, or “Anonymous” if all of them are null/undefined.

Let’s use the ?? operator to accomplish this:

let FirstName = null;
let LastName = null;
let NickName= "Coder";

// shows the first defined value:
alert(FirstName ?? LastName ?? NickName?? "Anonymous"); // Coder

Comparison with ||

The OR || operator can be used in the same way as we use ??.

In the code above, for example, we replace ?? with || and still get the same result:

let FirstName = null;
let LastName = null;
let NickName= "Coder";

// shows the first truthy value:
alert(FirstName || LastName || NickName|| "Anonymous"); // Coder

The important difference between  ?? and  || is that:

  • || returns the first truthy value.
  • ?? returns the first defined value.

In other words, || does not differentiate between false, zero, empty string ” ” and null/undefined. They are all the same – faulty values. If any of these are the first arguments to ||, the result will be the second argument.

We may only want to use the default value when the variable is null/undefined. That is when the value is truly unknown or undefined.

Consider the following example:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0
  • The height || 100 checks height for a false value and finds it to be 0.

So the result of || is 100.

  • The height?? 100 checks for null/undefined height, which it is not.

So the result of  ?? is 0.

Precedence

The ?? operator has the same precedence as ||.

It means that, like ||, the nullish coalescing operator “??” is evaluated before = and ?but after most other operations, such as +*.

We may need to include parentheses in expressions like this:

let height = null;
let width = null;

// important: use parentheses
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

Otherwise, omitting the parentheses would result in incorrect results because *has higher precedence than??.

// without parentheses
let area = height ?? 100 * width ?? 50;

// ...works this way (not what we want):
let area = height ?? (100 * width) ?? 50;

Using ?? with && or ||

JavaScript prohibits the use of ?? with the && and || operators for safety reasons, unless the precedence is explicitly specified with parentheses.

The following code produces a syntax error:

let x = 1 && 2 ?? 3; // Syntax error like "Uncaught SyntaxError: Unexpected token '??'"

The limitation is certainly debatable; it was added to the language specification in order to avoid programming errors when people begin to switch from || to ??.

To get around it, use explicit parentheses:

let x = (1 && 2) ?? 3; // Works

alert(x); // 2

Summary

Nullish coalescing operator ?? gives a quick way to select the first “defined” value from a list.

// set height=100, if height is null or undefined
height = height ?? 100;

When using the operator ?? in an expression, keep in mind that it has very low precedence, only slightly higher than? and = .

It is not permitted to use || or && without explicit parentheses.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories