Introduction
The nullish coalescing operator, which is denoted by the double question mark (??), is a JavaScript operator which was introduced in ES2020.
The nullish coalescing operator is not a brand-new concept. The first "defined" value of the two can be obtained with just a nice syntax.
This is a logical operator which accepts two values and returns a result.
value1 ?? value2
The logic will return the second value, which is value2, if the first value, value1 is either null or undefined.
This works the same way as the code given below:
let returnedValue = value1;
if (value1 === null || value1 === undefined) {
returnedValue = value2;
};
Instead of writing this whole 3-line code, we can just write it in a single line using nullish coalescing operator.
let result = value1 ?? value2
If the first value meets the requirement, that is, if it is not null or undefined, the operator will not look to see what is present in the second case but will instead simply return the first value.
This operator is similar to the logical OR || and AND && operator, as it also doesn't check the second value, if the first one passes the test. But there is a slight difference between the OR operator and ?? operator.
Examples
Let us take some examples.
let myName;
let result = myName ?? "Sweta"
console.log(result) // Sweta
Here, the variable myName is declared but not initialized, so its value is undefined. That is why the ?? operator will return the second value, i.e., Sweta.
let result = "Hello" ?? "World"
console.log(result) // Hello
In this case, the first string has a value of Hello, so it is defined and hence the operator will not check the second value and will simply return Hello.
We can also use a sequence of values using this operator.
let fruitOne = null;
let fruitTwo;
let fruitThree = "Apple";
let fruitFour = "Mango";
let fruits = fruitOne ?? fruitTwo ?? fruitThree ?? fruitFour;
console.log(fruits) // Apple
The ?? operator in this code will initially verify the value of the first variable. If null is discovered, it will go on to the next step. As the second value is undefined, the third value will be used instead. As the third value contains the text "Apple," the console will skip the fourth value and return the string instead.
Difference Between OR operator and ?? operator
The ?? operator was only recently added, but the OR operator has been in use since JavaScript's introduction.
Because the OR operator was somehow causing some issues that were becoming extremely challenging for developers to overcome, the nullish coalescing operator was developed.
The fundamental distinction between these two operators is that, while the ?? operator returns the first 'defined' value it receives, the OR operator returns the first true value it encounters.
If the first value is 0, false or an empty string ' ', the OR operator will return the second value, while the ?? operator will only return the second value if the first one is null or undefined.
console.log(0 || "Hello") // Hello
console.log(0 ?? "Hello") // 0
console.log(false || 10) // 10
console.log(false ?? 10) // false
console.log(null || "Heya") // Heya
console.log(null ?? "Heya") // Heya
Unless it is null or undefined, the default value, which is the first value, is what we generally want to use. However, the OR operator also ignores false, 0 or empty string values. When we want these results as output, the OR operator isn't always the best choice.
Conclusion
Nullish Coalescing Operator (??) is an operator which takes two values and returns the right side value if the left side value is either null or undefined. It improves the readability and grasp of the code. We can use this for clarity and clean coding while operating with JavaScript.