The Nullish Coalescing Operator in JavaScript

I added the SonarLint extension to my code editor (VSCode) early last week. The extension has proven quite useful, especially in highlighting several unsafe methods of JavaScript function writing and rendering. The usage of the safer nullish coalescing operator?? rather of the logical || was one of the several problems that SonarLint pointed up. This made me conduct a little research, and once I learned why, I decided to spread the word.

What is a Nullish Coalescing Operator?

The nullish coalescing operator (??) is a JavaScript operator introduced in ECMAScript 2020 (ES11) that provides a convenient way to provide a default value for a variable if the variable's value is null or undefined. It's used to handle cases where you want to use a default value only when the variable's value is explicitly null or undefined, and not when it's other falsy values like 0, false, or an empty string.

In other words, it can be simply explained as 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. Compared to the Logical OR that returns false (or falsey value) is undefined or null.

The syntax:

const value = yourPreferredValue ?? defaultValue;

The result of the above code snippet is:

• if yourPreferredValue is defined, then yourPreferredValue,

• if yourPreferredValue isn’t defined, then defaultValue.

Let's take a look at another example.

let user;
console.log(user ?? "Stranger"); 
//the result is Stranger (because user is null/undefined)

Here’s an example with user assigned to a name:

let user = "Nnamdi";
console.log(user ?? "Stranger");
// shows the first defined value: Nnamdi (user is not null/undefined)

The important difference between them is that:

• || returns the first truthy value.

• ?? returns the first defined value.

In other words, || doesn’t distinguish between false, 0, an empty string "" and null/undefined. They are all the same – falsy values. If any of these is the first argument of ||, then we’ll get the second argument as the result. This can be a little tricky when a value of 0 is assigned to a variable, for example:

let length = 0;
console.log(length || 50);
console.log(length ?? 50);

• The length || 50 checks length for being a falsy value, and it’s 0, falsy indeed.

  • Then the result of || is the second argument, 50.

• The length ?? 50 checks length for being null/undefined, and it’s not,

  • Then the result is length “as is”, that is 0.

In practice, the zero length is often a valid value, that shouldn’t be replaced with the default. So ?? does just the right thing.

You can tweet me _@iamclement_ when you test this out or share your thoughts by utilizing the nullish coalescing operator in a server-side component, which is one thing I'd recommend.

And that is it for now 🎉.