Double question mark in JavaScript (Nullish coalescing operator)

The nullish coalescing operator is a new JavaScript feature introduced in the ECMAScript 2020 specification. It is represented by two consecutive question marks (??).

Introduction

The nullish coalescing operator provides a default value for null or undefined values. It allows you to handle cases where a value may be null or undefined concisely and elegantly without using the logical OR operator (||).

It is particularly useful when you want to avoid the unintended consequences of using the logical OR operator. For example, use the logical OR operator to provide a default value for a variable that may be null or undefined. The operator will return the first truthy value it encounters. This can lead to unexpected results if the default value you provide is also a truthy value, such as 0 or an empty string.

By contrast, the nullish coalescing operator only returns the default value if the left-hand side expression is specifically null or undefined. This makes it a more reliable and predictable way to handle null or undefined values in your code.

What is the nullish coalescing operator?

If you’re a JavaScript developer, you’ve probably used the logical OR operator (||) before to provide default values for variables. For example, you might write something like this:

let userName = usernameInput || 'Anonymous';
Code language: JavaScript (javascript)

This code checks the value of usernameInput and, if it’s falsy (i.e. null, undefined, 0, “”, or false), it assigns the string ‘Anonymous’ to userName. This can be a handy way to ensure that a variable always has a valid value rather than possibly throwing an error or producing unexpected results.

However, there are times when the logical OR operator doesn’t quite cut it, and that’s where the nullish coalescing operator (??) comes in. It is a newer addition to JavaScript (introduced in the ES2020 specification) that explicitly checks for null or undefined values rather than any falsy value.

Here’s how you can use the nullish coalescing operator in a similar way to the logical OR operator:

let userName = usernameInput ?? 'Anonymous';
Code language: JavaScript (javascript)

It works just like the logical OR operator in this case, but it only assigns the default value of ‘Anonymous’ if usernameInput is null or undefined. If usernameInput is any other falsy value (such as 0 or “”), the nullish coalescing operator will not provide a default value.

This might not seem like a big difference at first glance, but consider the following example:

let userName = usernameInput || 'Anonymous';
// userName is 'Anonymous' if usernameInput is falsy
let userAge = userAgeInput || 0;
// userAge is 0 if userAgeInput is falsy
Code language: JavaScript (javascript)

In this code, the logical OR operator provides default values for userName and userAge if the corresponding input variables are falsy. However, what if you wanted to allow the user to enter a name or age of 0? In that case, the logical OR operator would not work as expected because 0 is a falsy value.

Here’s how the nullish coalescing operator can be used to solve this problem:

let userName = usernameInput ?? 'Anonymous';
// userName is 'Anonymous' if usernameInput is null or undefined
let userAge = userAgeInput ?? 0;
// userAge is 0 if userAgeInput is null or undefined
Code language: JavaScript (javascript)

With it, userName and userAge will only be assigned default values if the corresponding input variables are null or undefined. If the input variables are any other falsy value (including 0), they will be retained as the value of userName and userAge.

In summary, the nullish coalescing operator is a valuable addition to JavaScript that allows you to provide default values for variables more precisely and reasonably. It’s handy when you need to allow for the possibility of null or undefined values or when you want to avoid assigning default values for other falsy values such as 0 or “”.

When to use the nullish coalescing operator

The nullish coalescing operator helps handle null or undefined values in JavaScript. It allows you to provide a default value for such values concisely and reliably.

There are several situations where using it can be particularly useful:

1. Providing default values for variables that may be null or undefined: It can provide default values for variables that may be null or undefined without using the logical OR operator (||). This can be useful when you want to avoid unintended consequences of using the logical OR operator, such as when the default value you provide is also a truthy value.
2. Handling optional function arguments: It can handle optional function arguments concisely and reliably. For example, suppose you have a function that takes an optional argument. In that case, you can use the nullish coalescing operator to provide a default value for the argument if it is not provided.
3. Simplifying ternary expressions: It can simplify ternary expressions by replacing the ternary operator (?:) with the nullish coalescing operator. This can make your code easier to read and maintain.
4. Improving code readability: In general, it can make your code more readable by providing a clear and concise way to handle null or undefined values.

It’s important to note that the nullish coalescing operator is not a replacement for the logical OR operator in all situations. There may still be cases where you need to use the logical OR operator, such as when you want to provide default values for truthy values. However, in situations where you specifically want to handle null or undefined values, it can be a useful tool.

Conclusion

In conclusion, the nullish coalescing operator is a new JavaScript feature introduced in the ECMAScript 2020 specification. It is represented by two consecutive question marks (??) and is used to provide a default value for null or undefined values.

It differs from the logical OR operator (||) in that it only returns the default value if the left-hand side expression is null or undefined. This makes it more reliable and predictable to handle null or undefined values in your code without using more complex conditional statements.

There are several situations where using the nullish coalescing operator can be particularly useful, such as when providing default values for variables, handling optional function arguments, and simplifying ternary expressions. It can also improve the readability of your code by providing a clear and concise way to handle null or undefined values.

Overall, the nullish coalescing operator is a valuable addition to the JavaScript language and can be a helpful tool for handling null or undefined values in your code.