Check out a free preview of the full Professional JS: Features You Need to Know course

The "Nullish Coalescing" Lesson is part of the full, Professional JS: Features You Need to Know course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano introduces the nullish coalescing operator and explains that it is used to check if a value is null or undefined and return a default value if it is.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Nullish Coalescing" Lesson

[00:00:00]
>> Maximiliano Firtman: Okay, so let's get into a nice operators. So here comes the part where I think that you will find things that you will use on a daily base knowledge coalescing operator. So we are named, right? So we are named. This is actually pretty cool, and he was actually every language that appeared after 2005 already had this.

[00:00:31]
So JavaScript was kind of behind other languages such as Swift, Kotlin, Dart, and Go many others, okay? Talking when something is optional, when you have nulls, or in JavaScript, when you have also undefined, okay? So it's common. It's a really common pattern in JavaScript to check all the time if something is null or undefined before using it, and if it's null or undefined, set the default value.

[00:01:04]
And typically for that we use an if that we know it's not an expression, so I cannot send it as an argument. And we have the expression version that is the ternary operator. That probably you have used where you say, okay, if the value exist, use the value.

[00:01:24]
For example, if it doesn't exist, use something like this, no value. So if I do have a value, of course, I will say hello. And if I don't have a value, or if it's null, okay? It will say no value, okay? The thing is that, yeah, value, value, I mean, it's not a big deal, okay?

[00:01:49]
But sometimes it's a long expression. Sometimes you're executing a function that actually returns the value. So you say, get the object, then load the object and get the value. And if it's not all, I want the value. So then you copy this, and you paste it here, and now it's not so cool.

[00:02:11]
You need to go multiple lines. So, I mean, it's fine, it's there, bro, you have used this before, but it sounds we can get it better and we can. From ES 2020, we have this new operator, the knowledge coalescing operator, that lets you remove this and instead of, so we remove the initial part, and we change this with a double question mark, okay?

[00:02:41]
So, I want the result to be this value. And if there is no value there, take this other one as an alternative. So for my case, it's going to look like this. So it's the same thing if I have a value. I see the value, and if I don't have a value, It will take 34.

[00:03:11]
It looks clear. Remember, most of the things that we are having to ECMAScript are this idea of, Syntax sugar. Maybe you're thinking, well, I mean, it's not a big deal because we could do that before as well, but yeah, it looks better. It looks nicer. And the same operator is available on some other languages as well.

[00:03:36]
Not always with the same syntax, but it's kind of similar to other languages as well. So double question mark will do the trick and this is an expression. So that means I can send that directly here in the console log without creating a variable. If it's an if, if I'm using a classic if, I need to create the variable.

[00:04:00]
So I think that looks cleaner now.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now