ES2020 'nullish coalescing operator' by example

Recently, I presented the 'Optional Chaining' operator. In this article, I'm going to cover another useful feature that comes with ECMA-Script version 11 or ES2020: the 'Nullish Coalescing' operator.
It is a perfect example that such a straightforward topic is wrapped into an allegedly complex expression.

Basically, what the nullish coalescing operator does, is, that it checks a value of its left-hand side whether it's null or undefined. If one of these two suspects is given, the right-hand side of the logical operator is returned, also called a fallback.

function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured ?? 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured())

// OUTPUT
// 'Fallback Value' ✅

Now you might ask yourself: 'Hey, what about the default value you can set with the logical OR operator?'. That's a valid question indeed. The logical OR operator checks the left-hand side for a falsy value and if it's the case it takes the default value on the right side. Falsy values are 0, false, an empty string, undefined, null and NaN. But what if the value on the left-hand side is supposed to be an empty string, a zero or the boolean false even? Well, then the OR operator wouldn't work as expected.

function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured || 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured(false))

// OUTPUT
// 'Fallback Value' ❌
// expected false

And here comes the 'Nullish Coalescing Operator'. Replace the two pipes with two question marks and the magic has happened. The expression will now only take the default value if the left-hand side is undefined or null.

function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured ?? 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured(false))

// OUTPUT
// false ✅

Keep in mind that you cannot chain the 'Nullish Coalescing Operator' with the AND or OR operator directly. You must use parenthesis in order to make it work. Now let's evaluate the if-condition. true || null gives us true. true !== undefined or null so we flow inside the block.

if ((true || null) ?? 'Chaining Is Training') {
  console.log("I'd like to get logged");
}

// OUTPUT
// "I'd like to get logged" 🎉

Replace true with undefined. undefined || null gives us null and thus, the nullish coalescing operator returns the value of its right-hand side 'Chaining Is Training'. The string is a truthy value and gets type-coerced to true since JavaScript is a weakly or loosely typed language. The if-condition is therefore fulfilled and we get the console.log as well.

if ((undefined || null) ?? 'Chaining Is Training') {
  console.log("I'd like to get logged");
}

// OUTPUT
// "I'd like to get logged" 🎉

What the 'Nullish Coalescing Operator' and the 'Optional Chaining' operator have in common, is, that they both treat undefined and null as specific values.

You're very welcome to subscribe to my YouTube channel for more informative videos: Subscribe! 📹

If you liked the post/video I'd appreciate to see you as a follower on my social media:
➡ YouTube
➡ Twitter
➡ Facebook