Lorenzo ZarantonelloJavaScript double question mark (??) operator is called the nullish coalescing operator and it provides a default value when a variable or an expression evaluates to null or undefined.
MDN defines the nullish coalescing operator (??) 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".
This might seem complex but it is actually very simple!
Understanding the JavaScript ?? operator
We will see two examples that you MUST know. Then, I will leave a few other examples using the JavaScript ?? operator as optional.
const favoriteFruit = null;
const result = favoriteFruit ?? 'You did not tell me';
console.log(result); // "You did not tell me"
- We start by declaring the variable favoriteFruit and we make it null.
- Then, let's read the next line like this: IF favoriteFruit is null, THEN the default value is 'You did not tell me'. The default value is assigned to the result variable.
- Finally, we log result and we see "You did not tell me".
So, if the value of the first variable (the one on the left side of the nullish coaleshing operator i.e. ??) is null, use the default value i.e. the one on the right side of the ?? operator.
Let's have another example and then I will explain why these two specific examples.
const favoriteFruit_1 = undefined;
const result = favoriteFruit_1 ?? 'You did not tell me, again!';
console.log(result); // "You did not tell me, again!"
Following the previous example,
- We start by declaring the favoriteFruit_1 variable but this time we make it undefined.
- Then, let's read the next line like this: IF favoriteFruit_1 is undefined, THEN the default value is 'You did not tell me, again!'. The default value is assigned to the result variable.
- Finally, we log result and we see "You did not tell me, again!".
So, if the value of the first variable (the one on the left side of the ?? operator) is undefined, use the default value i.e. the one on the right side of the ?? operator.
Why two examples to explain the JavaScript ?? operator?
Because that is all you need!
In fact, you can read ANY JavaScript ?? operator like this: IF the first value is null/undefined THEN use the default value.
This is what a nullish coalescing operator (??) will return.
It is important to remember that null and undefined are the only two cases that will prompt the use of the default value!
It doesn't matter if you are tinkering with your first portfolio project or if you are starting with React. The nullish coalescing operator may come useful anytime.
Whenever you use the nullish coalescing operator, an empty string like "" or a 0 will not trigger the default value.
Check the other cases using the JavaScript ?? operator.
Conclusion
Using the nullish coalescing operator, or double question mark, is fairly straightforward.
When you see the JavaScript ?? operator, follow this logic: IF the first value is null/undefined THEN use the default value.
