Optional Chaining, Logical, and Exponential Operators

[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. Now it's time to continue with operators. Now talking about logical assignment. So this has to do with something that you probably know when you are working with other operators.

[00:07:07]
For example, when you have something like this, and then you say a+=1, you're using this assignment operator. Well, this is for an arithmetic operation. We have the same thing since ES2021, but for logical operators. So, for example, in this case, for the and operator, when you have this situation where you take the same variable here and here, we can use this, &=, something like that, or |=.

[00:07:50]
>> Maximiliano Firtman: And also we have this one, which is interesting. Semantically, when you look at that, it's weird to see this. Why do you want to do that? But it's okay. It's like redefining c, if it's undefined or null.
>> Audience: Yeah, that is the difference between line 11 and line 8, right?

[00:08:16]
Is that 8 will pull up empty string, 0-
>> Maximiliano Firtman: Yeah, exactly, because this one is similar. In fact, it was a common pattern to use the or operator to mimic this nullish coalescent operator. But yeah, the difference has to do with which parts give you false. That in this case, empty string and other things will also give you a difference compared with when you use the other one.

[00:08:44]
I don't think you would use this a lot. I mean, it's okay to have them, but it's not gonna make any big difference. Something similar comes here. Instead of using Math.pow for power of, now you can use this new operator, **, that will make the same trick. Straightforward, okay?

[00:09:04]
But this is one example of something that is not gonna work on other browsers. So this is from 2016, so anyway at this point it's kind of safe. But IE11 will give you a syntax error on that line. So when you are using a transpiler, they are just going back to the solution where you're using that operator, the transpiler will convert that into Math.pow.

[00:09:29]
That works anyway, okay? So it's syntax sure.