JavaScript ?? operator

JavaScript 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.

Comments

[Alejandro López]

You could say it's a regular OR operator (||) but it's restricted to catch undefined and null instead of it being open to all falsey values (zero, empty string, etc.).

[Lorenzo Zarantonello]

Yes! That is true. The nullish coalescing operator is often compared to the OR operator. That requires knowledge of some other concepts like truthy and falsy on top of how the OR operator works.

I just wanted to focus on one single concept:)
You comment stands true and I am glad you wrote it!

[Simon Wicki]

Great post, Lorenzo.

I must admit it took me a while to consider undefined is part of the term nullish.

like in:

• truthy -> true, 1, "abc"
• falsy -> false, 0, "", undefined, null
• nullish -> null, undefined