Have you ever wondered about the differences between the ?? and || operators in JavaScript? These two operators may seem similar, but they have one key difference that set them apart, and that’s what we’ll be talking about in this article.
How ?? and || differ
The || operator returns the first truthy value it encounters, or the last value in the expression if all values are falsy. For example:
const x = undefined || null || '' || 'hello';
console.log(x); // Output: 'hello'In this example, the || operator returns 'hello' because it is the first truthy value in the expression.
On the other hand, the ?? operator only returns the second operand if the first operand is null or undefined. For example:
const x = undefined ?? null ?? '' ?? 'hello';
console.log(x); // Output: ''In this example, the ?? operator returns "" because it is the first defined value in the expression.
Tip: Falsy values in JavaScript are null, undefined, false, 0, NaN, and '' (empty string). Every other value is truthy, and will be coerced to true in a Boolean() constructor.
In this example, the ?? operator returns '' because it is the first value that is not null/undefined in the expression.
When to use the null coalescing (??) operator
One common use case for ?? is when you want to treat certain values, such as 0 or empty strings (''), as literal values instead of the absence of a value. In these cases, ?? can be used to provide a fallback value only when a value is strictly null or undefined.
For example, let’s say we have a function paginate that takes an options object as an argument, and returns an array of numbers up to a certain limit. We want to provide a default limit of 3 if no limit is provided, and return an empty array if the limit is set to 0. We can use the ?? operator to achieve this:
function paginate(options = {}) {
return ['a', 'b', 'c', 'd', 'e'].splice(0, options.limit ?? 3);
}
paginate(1); // Output: ['a']
paginate(); // Output: ['a', 'b', 'c']
paginate(0); // Output: []In this example, if options.limit is null or undefined, the ?? operator falls back to the default value of 3. However, if options.limit is 0, the ?? operator returns 0 instead of the default value. This is because 0 is a literal value, meant to indicate that no pages should be returned in the result. In constrast, if we had used the || operator, paginate would have used the default value of 3 for the pagination.
When to use the logical OR (||) operator
Now that we’ve covered the use cases for the ?? operator, let’s take a look at when to use the || operator instead.
The || operator is useful when we want to provide a default value for a variable or function parameter that is falsy. For example, let’s say we have a function called getUsername that takes in a userInput parameter. If userInput is falsy, we want to return a default value of “Guest”. We can use the || operator to achieve this in a concise way, like so:
function getUsername(userInput) {
return userInput || 'Guest';
}Key takeways
Both the ?? and || operators are useful in providing default values and handling falsy values in JavaScript. However, the ?? operator is better suited for cases where values like 0 and empty strings should be treated literally instead of being treated as an indication of an absent value. On the other hand, the || operator is useful for providing fallback values when a value is missing or falsy. By understanding the differences and appropriate use cases of each operator, you can avoid unexpected bugs in your code.
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
