Overview
In JavaScript, nullish coalescing is a concept that allows developers to determine whether a value is null or undefined, and if it is, it provides a default value to use instead. This feature was introduced in ECMAScript 2020 (ES11) on April 2nd, 2020, and is a useful addition to the language that can help simplify code and improve its readability.
Scope
In this blog, we will try to understand what is nullish coalescing operator ??, what we were using before it came in 2020, and how it is different from OR|| operator.
Introduction
Have you ever had to use the right operand, which has a specified value, where the first operand is null or undefined during a comparison? Many Javascript developers frequently encountered this situation. Hence, the role of nullish coalescing operator ?? assigns the right operand to the result of the expression if the left operand is null or undefined.
let result = x ?? y
In the above example, the result will be x if it is not null/undefined. Otherwise y if x value is null/undefined.
You must be thinking nullish coalescing operator ?? was introduced in 2020 then what we were using before that for comparison of values. We were using OR || operator but it had some limitations let's understand it.
Background Information
In Javascript, there is an OR operator ||. It returns the first truthy value.
The values that are considered falsy are as follows:
false
undefined
null
"" (empty string)
NaN
0
Therefore, anything that isn't on the list above will be taken as a truthy value.
Non-boolean values that are forced to true or false by specific procedures are known as truthy and falsy values.
const x=2;
const y=5;
const result= x || y;
console.log(result); // 2
As the || operator returns the first truthy value, in the above code the result will be x which is 2.
If x is a falsy value then the next operand after the || operator will be evaluated and that will be the result of the total expression.
const x = null;
const y = 4;
const result = x || y;
console.log(result); // 4
In the above example, y will be checked in this case because x is null. Since it is a true value, y will be the result of the complete statement.
?? vs ||
Before the introduction of nullish coalescing, developers would use a logical OR operator || to provide default values. This approach worked well for some cases, but it had a few limitations. For example, a user's age maybe 0, which is a valid value, but it would be treated as false by the logical OR operator and the default value would be used instead.
Nullish coalescing solves this problem by only returning the default value if the original value is null or undefined. To use the nullish coalescing operator ??, you simply place it between the original value and the default value.
Example:
const age = 0;
const userAge = age ?? 18;
const userAge1 = age || 18;
console.log(userAge); // 0
console.log(userAge1); // 18
In the above example, the value of age is 0, which is a falsy value, but it is a valid value in the context of a user's age. If we were to use the logical OR operator instead, it would return the default value of 18, which would be incorrect. However, with the nullish coalescing operator, the value of userAge is correctly set to 0.
In the above example, the value of age is 0, which is a falsy value. ?? will return 0 but || operator will treat the age value as falsy value and will return 18 in this case.
Another advantage of the nullish coalescing operator is that it can be chained together to provide fallback values.
Example-
const user = { name: 'Raj', age: 30 };
const userName = user.username ?? user.name ?? 'Anonymous';
console.log(userName); // "Raj"
In this example, the user object has a username property, but it is undefined. Therefore, the nullish coalescing operator falls back to the name property and returns the value "Raj".
So, it is better to use ?? than || .
Some more examples for understanding
let result = undefined ?? "Raj";
console.log(result); // Raj
result = 15 ?? true;
console.log(result); // 15
result = "" ?? true;
console.log(result); // ""
result = null ?? true;
console.log(result); // true
result = false ?? true;
console.log(result); // false
result = NaN ?? true;
console.log(result); // NaN
result = 4 > 5 ?? true;
console.log(result); // false because 4 > 5 evaluates to false
result = 4 < 5 ?? true;
console.log(result); // true because 4 < 5 evaluates to true
result = [1, 2, 3] ?? true;
console.log(result); // [1, 2, 3]
Browser Compatibility
The browsers supported by JavaScript Nullish Coalescing Operator or javascript double question mark are listed below:
| Browser | Version |
| Chrome | 80 |
| Edge | 80 |
| Firefox | 72 |
| Opera | 67 |
| Safari | 13.1 |
Conclusion
Nullish coalescing (??) is a logical operator that takes two values and returns the right-hand value if the left-hand value is undefined or null, else returns its left-hand value.
Nullish coalescing is a useful addition to the JavaScript language that can simplify code and make it more readable. It provides a way to set default values only when necessary, and it can be used in a variety of contexts. If you are working with modern JavaScript, it's worth incorporating nullish coalescing into your code.