Optional Chaining

[00:00:00]
>> Maximiliano Firtman: Around the same idea of working with nulls and undefines, let's look at this example. Let's analyze this example. And maybe in this example, it's actually pretty simple, but I can give you one minute so you can try it on your own and see if it works. So there is a new operator known as the Optional Chaining Operator that is also available in other languages.

[00:00:34]
Look at this, we have an array of users. Each user has a name and sometimes an address. And the address sometimes has a city, but for Singapore, for example, we don't have a city, we have just a country. It's kind of a city country, Singapore, I'm not sure if you've been there.

[00:00:52]
But I think there is only another city that is the island, but it's kind of a city state. So then we don't have a city. So, well, but I wanna render something, well, like this. I mean, you say, well, we can use this nullish coalescing operator if there is no city, okay?

[00:01:13]
No city defined, which is okay, that works. What is the problem here? If I run this code, this is going using a for-of, it's looping through all the users. The first one works, it says New York, okay? Because it works, but on the second one, we have an error, we have a runtime exception.

[00:01:37]
Cannot read properties of undefined, reading city. So the second one has no address. So it's not working. So then you need to start saying, well, if, okay? Or before that, if it doesn't contain the address. Let me remove that for a second. If I run this, the other one doesn't work because it contains the address, but it doesn't contain the city.

[00:02:08]
So when it tries to convert the city to uppercase, the city is undefined, so you cannot execute a method toUpperCase of an undefined. So here we have the problem, address can be null or undefined, or city can be null or undefined. So let me show you the new operator separately, but nothing here.

[00:02:35]
So let's go back to this idea like I may have a name, okay? Or not. So I create a variable name and I can do a console log with the name, okay? Nothing happens. But if I try to convert this to uppercase, for example, I cannot execute the method of an undefined, it'll give me an error.

[00:02:59]
Well, the new Optional Chaining Operator lets you add a question mark before the dot, like that. So I have a question mark before the dot. It's like saying, if there is a name, execute the method. If there's no name, the whole expression returns undefined.
>> Maximiliano Firtman: So now I'm saying nothing, but not an error.

[00:03:28]
>> Maximiliano Firtman: Okay, not an error. Maybe I could now mix this with a nullish operator and say, well, no name, because they hope, but I don't get an error. That's the important part, okay? That I don't get an error. So now let's take one minute. I think one minute should be enough to see if you can load Operators Optional Chaining and make this code work applying the Optional Chaining Operator.

[00:04:04]
>> Maximiliano Firtman: So what's the goal? I don't wanna see an error, okay? So then I need to start playing with this and adding the optional chaining operator on some places. For example, the first problem that I have is with Mary that doesn't contain an address. So then I will say if the address exists, so I will add a question mark there.

[00:04:27]
So if I run this, now it go through the second example, but not the third one, why? Because the third one, Sophie, has an address with no city. So I can use the same operator twice in the same expression, it's okay. And then if I run this, now, I also don't have a city for Sophie, which now works.

[00:04:53]
Maybe you're thinking, well, should I add this to user as well?
>> Maximiliano Firtman: I mean, you can. I mean, for this particular example doesn't make any sense, unless you have one particular user that is null. If that's the case, it's fine. So you can add that operator on every call, every property access, every method you're calling.

[00:05:19]
Don't get too comfortable with that. So don't go, and every time you use a dot, you add the question mark. That's not the idea, okay? Because then you will have debugging problem, because sometimes you shouldn't be receiving that. And it's okay to maybe trigger an exception in the system.

[00:05:40]
You don't wanna continue with undefineds when it's not really the case.
>> Audience: On line 13, it'll blow up now, right? Because it'll try to look up the .name property on null.
>> Maximiliano Firtman: On line 13, here, you say the name?
>> Audience: Yeah.
>> Maximiliano Firtman: Yeah, you're right, if I run this it's not working for the names, but then I can use it here as well.

[00:06:03]
And you can mix this together, and instead of creating a variable city you can pull everything like this here, and mix this with this other argument. So now, if you have an user, if the user has an address, if the address has a city, you convert that to uppercase.

[00:06:22]
And if any of those is null or undefined, then no city defined for that user name. By the way, here we can continue this and say, if there is no name, no user or something like that, whatever, no user, no name. So you can mix all these question mark.

[00:06:46]
But again, try to be smart, clever about when to use them, because if you use them everywhere, it's actually an anti-pattern.