WEBVTT 1 00:00:01.490 --> 00:00:02.840 Now, even more modern 2 00:00:02.840 --> 00:00:04.833 that the nullish coalescing operator 3 00:00:04.833 --> 00:00:06.510 that we just talked about 4 00:00:06.510 --> 00:00:10.280 are three new so-called logical assignment operators 5 00:00:10.280 --> 00:00:13.320 that were introduced in ES 2021. 6 00:00:13.320 --> 00:00:15.203 So let's see how they work. 7 00:00:16.360 --> 00:00:18.950 And in order to do that in an effective way, 8 00:00:18.950 --> 00:00:23.513 let's quickly start by creating two new restaurant object. 9 00:00:24.760 --> 00:00:26.790 So I'm gonna call then restaurant one 10 00:00:26.790 --> 00:00:28.420 and restaurant two. 11 00:00:28.420 --> 00:00:30.871 And they are extremely simple. 12 00:00:30.871 --> 00:00:32.660 They just have a name 13 00:00:33.600 --> 00:00:35.433 and then this one has a property, 14 00:00:36.920 --> 00:00:38.400 number of guests, 15 00:00:38.400 --> 00:00:40.303 and let's set it to 20 here. 16 00:00:42.180 --> 00:00:46.010 And then there will also be a restaurant two. 17 00:00:46.010 --> 00:00:48.763 And, in fact, let's just duplicate this one here. 18 00:00:50.490 --> 00:00:51.683 Restaurant two. 19 00:00:54.140 --> 00:00:56.693 Call this on La Piazza. 20 00:00:57.860 --> 00:00:58.693 And this one actually 21 00:00:58.693 --> 00:01:01.630 doesn't have the number of guests property 22 00:01:01.630 --> 00:01:03.483 but it has an owner. 23 00:01:05.600 --> 00:01:10.600 So Giovanni Rossi, or whatever. 24 00:01:14.410 --> 00:01:17.490 Okay, and the first thing that we want to do now 25 00:01:17.490 --> 00:01:20.220 is to set a default number of guests 26 00:01:20.220 --> 00:01:21.920 for all the restaurant objects 27 00:01:21.920 --> 00:01:24.230 that do not have that property. 28 00:01:24.230 --> 00:01:27.240 So in this case, it is just this restaurant here 29 00:01:27.240 --> 00:01:29.290 but let's pretend that we got them 30 00:01:29.290 --> 00:01:33.030 so that we got these restaurants from some kind of API, 31 00:01:33.030 --> 00:01:36.070 and now we want to apply something to all of them. 32 00:01:36.070 --> 00:01:37.530 So in this case, 33 00:01:37.530 --> 00:01:40.650 basically adding the number of guests property 34 00:01:40.650 --> 00:01:43.270 to the objects that do not have them. 35 00:01:43.270 --> 00:01:46.650 And let's start by using the tool that we already know about 36 00:01:46.650 --> 00:01:47.830 to do this. 37 00:01:47.830 --> 00:01:50.370 And so that is the or operator. 38 00:01:50.370 --> 00:01:52.850 So we already know how we can do this using 39 00:01:52.850 --> 00:01:54.853 the or operator, right? 40 00:01:56.130 --> 00:01:57.470 So let's say rest2 41 00:02:03.827 --> 00:02:07.743 .number of guests should be equal to rest1.numGuests 42 00:02:11.000 --> 00:02:13.653 or 10. 43 00:02:14.900 --> 00:02:17.140 So let's quickly remember that this works 44 00:02:17.140 --> 00:02:19.830 because of short circuiting. 45 00:02:19.830 --> 00:02:21.210 So in the or operator, 46 00:02:21.210 --> 00:02:24.310 if the first value is truthy, 47 00:02:24.310 --> 00:02:27.070 so this one here, then that first value 48 00:02:27.070 --> 00:02:30.330 will immediately be returned and the second value 49 00:02:30.330 --> 00:02:32.350 will not even be evaluated. 50 00:02:32.350 --> 00:02:33.990 So that's this one here. 51 00:02:33.990 --> 00:02:35.633 And so by doing this, 52 00:02:36.470 --> 00:02:38.467 and here actually should be numGuests, 53 00:02:40.160 --> 00:02:41.970 so again by doing this, 54 00:02:41.970 --> 00:02:44.380 here we are returning the number of guests 55 00:02:44.380 --> 00:02:47.510 if it does exist, so if it's not falsy, 56 00:02:47.510 --> 00:02:50.293 and otherwise, the 10 is going to be returned. 57 00:02:51.640 --> 00:02:52.473 Okay? 58 00:02:52.473 --> 00:02:54.883 And in fact, let's duplicate this line here. 59 00:02:55.950 --> 00:02:57.410 But first, I should fix it 60 00:02:57.410 --> 00:03:00.760 because, of course, the number of guests in restaurant two 61 00:03:00.760 --> 00:03:03.110 should be set based on the number 62 00:03:03.110 --> 00:03:05.893 of guests that are in restaurant two or not. 63 00:03:06.890 --> 00:03:09.610 But anyway, duplicating this now 64 00:03:09.610 --> 00:03:12.650 and then doing it for both restaurants here 65 00:03:12.650 --> 00:03:14.100 so that we can see the result 66 00:03:18.140 --> 00:03:20.563 here for both objects. 67 00:03:22.120 --> 00:03:23.173 So let's see. 68 00:03:24.020 --> 00:03:26.260 And here we go. 69 00:03:26.260 --> 00:03:29.060 So the second one here didn't have a number of guests 70 00:03:29.060 --> 00:03:31.760 and so now numGuests is 10. 71 00:03:31.760 --> 00:03:34.803 And again, that is because of short circuiting. 72 00:03:35.760 --> 00:03:37.940 So this here returned undefined 73 00:03:37.940 --> 00:03:40.200 and so then the second one got returned, 74 00:03:40.200 --> 00:03:42.530 while here in this one, 75 00:03:42.530 --> 00:03:44.080 this value was 20 76 00:03:44.080 --> 00:03:47.720 and so it is this 20 that immediately got returned. 77 00:03:47.720 --> 00:03:50.050 So nothing new up until this point 78 00:03:50.050 --> 00:03:51.630 but now let me introduce 79 00:03:51.630 --> 00:03:54.600 the very first logical assignment operator, 80 00:03:54.600 --> 00:03:56.853 which is the or assignment operator. 81 00:03:58.950 --> 00:04:00.380 So with that operator, 82 00:04:00.380 --> 00:04:03.270 we will be able to write the same thing basically 83 00:04:03.270 --> 00:04:04.793 in a more concise way. 84 00:04:05.730 --> 00:04:06.913 So rest1.numGuests, 85 00:04:10.610 --> 00:04:13.530 and now instead of repeating the same thing again 86 00:04:13.530 --> 00:04:14.800 like I did here, 87 00:04:14.800 --> 00:04:19.033 I can simply write or equal and then 10. 88 00:04:20.200 --> 00:04:21.790 And that's it. 89 00:04:21.790 --> 00:04:24.910 So this here is exactly the same as this one 90 00:04:24.910 --> 00:04:26.623 but in a more concise way. 91 00:04:27.930 --> 00:04:29.550 Okay? 92 00:04:29.550 --> 00:04:31.400 Let's do the same for restaurant two. 93 00:04:33.220 --> 00:04:35.263 And if we comment out these two now, 94 00:04:36.860 --> 00:04:40.530 then as you see the result is exactly the same. 95 00:04:40.530 --> 00:04:41.890 Great. 96 00:04:41.890 --> 00:04:46.843 So let's write here the OR assignment operator. 97 00:04:49.090 --> 00:04:51.940 And basically, this operator assigns a variable 98 00:04:51.940 --> 00:04:56.090 to a variable if that variable is currently falsy. 99 00:04:56.090 --> 00:04:58.410 So again, exactly what's happening here 100 00:04:58.410 --> 00:05:01.120 because this variable is currently falsy 101 00:05:01.120 --> 00:05:04.313 and so it will be assigned the value of 10. 102 00:05:05.760 --> 00:05:08.240 Great, so that works beautifully, 103 00:05:08.240 --> 00:05:10.150 except in one situation. 104 00:05:10.150 --> 00:05:12.690 That actually we already encountered before 105 00:05:12.690 --> 00:05:14.253 in the previous lecture. 106 00:05:16.060 --> 00:05:19.870 So let's actually duplicate this here. 107 00:05:19.870 --> 00:05:21.210 Comment out this one. 108 00:05:21.210 --> 00:05:24.220 And now setting the number of guests to zero, 109 00:05:24.220 --> 00:05:27.560 which is a perfectly reasonable number, right? 110 00:05:27.560 --> 00:05:31.053 But look what happens if I then run this code again. 111 00:05:32.480 --> 00:05:33.570 As we can see here, 112 00:05:33.570 --> 00:05:35.110 it is back to being 10, 113 00:05:35.110 --> 00:05:37.383 even though we set it to zero here. 114 00:05:38.240 --> 00:05:40.410 So can you guess why that is happening 115 00:05:40.410 --> 00:05:42.660 based on what we learned in the last lecture? 116 00:05:43.630 --> 00:05:46.780 Well, zero is actually a falsy value, 117 00:05:46.780 --> 00:05:48.970 and so this OR assignment operator 118 00:05:48.970 --> 00:05:51.010 is actually working just fine. 119 00:05:51.010 --> 00:05:54.140 So this here right now is falsy 120 00:05:54.140 --> 00:05:58.060 and so therefore, it will then be assigned this value of 10, 121 00:05:58.060 --> 00:06:00.800 which is exactly what this operator does. 122 00:06:00.800 --> 00:06:04.210 So again, the logical OR assignment operator 123 00:06:04.210 --> 00:06:06.680 will assign a value to a variable 124 00:06:06.680 --> 00:06:10.013 if that exact variable is falsy right now. 125 00:06:12.060 --> 00:06:15.823 However, fortunately, we have a good way of solving this. 126 00:06:17.670 --> 00:06:21.100 So let's copy all of this, put it here, 127 00:06:21.100 --> 00:06:22.950 comment out these two 128 00:06:22.950 --> 00:06:24.980 because they don't really work. 129 00:06:24.980 --> 00:06:27.660 And so here we actually do also have 130 00:06:27.660 --> 00:06:30.433 the logical nullish assignment operator. 131 00:06:31.440 --> 00:06:32.890 Sounds a bit complicated 132 00:06:32.890 --> 00:06:34.200 but really all it is 133 00:06:34.200 --> 00:06:38.400 is to change the or for the nullish coalescing operator. 134 00:06:38.400 --> 00:06:41.403 So let's actually write that also here. 135 00:06:46.770 --> 00:06:48.970 Nullish assignment operator. 136 00:06:48.970 --> 00:06:50.310 So if I save it now, 137 00:06:50.310 --> 00:06:53.120 then it is back to zero here. 138 00:06:53.120 --> 00:06:56.700 And that is exactly the correct result here. 139 00:06:56.700 --> 00:06:58.290 Let's just remember here 140 00:06:58.290 --> 00:07:00.680 that nullish basically means null 141 00:07:02.410 --> 00:07:06.100 or undefined, and right here in restaurant two, 142 00:07:06.100 --> 00:07:08.450 the number of guests is undefined 143 00:07:08.450 --> 00:07:11.930 and so therefore, then the 10 will be assigned 144 00:07:11.930 --> 00:07:13.720 to that variable. 145 00:07:13.720 --> 00:07:15.740 And so in a nutshell, 146 00:07:15.740 --> 00:07:17.500 the nullish assignment operator 147 00:07:17.500 --> 00:07:20.260 will assign a value to a variable 148 00:07:20.260 --> 00:07:24.530 if that exact variable is currently nullish. 149 00:07:24.530 --> 00:07:27.973 So again, that is the case in restaurant number two. 150 00:07:28.950 --> 00:07:30.070 Okay. 151 00:07:30.070 --> 00:07:32.030 And as you can probably guess, 152 00:07:32.030 --> 00:07:36.020 we do also have the logical and assignment operator. 153 00:07:36.020 --> 00:07:37.730 And to learn about that one, 154 00:07:37.730 --> 00:07:41.050 let's say that we want to anonymize the names 155 00:07:41.050 --> 00:07:43.330 of the restaurant owners. 156 00:07:43.330 --> 00:07:46.300 So when there currently is an owner, 157 00:07:46.300 --> 00:07:47.940 like here in this object, 158 00:07:47.940 --> 00:07:50.760 we want to basically replace this string here 159 00:07:50.760 --> 00:07:53.130 with the string anonymous. 160 00:07:53.130 --> 00:07:56.380 So how could we do that again using the tools 161 00:07:56.380 --> 00:07:57.583 that we already know? 162 00:07:58.870 --> 00:08:03.480 Well, let's say rest2.owner 163 00:08:04.730 --> 00:08:08.313 and now let's use for now just an and operator. 164 00:08:10.000 --> 00:08:14.340 So we can say rest2.owner 165 00:08:16.490 --> 00:08:20.193 and then let's write it like this. 166 00:08:22.700 --> 00:08:25.180 Anonymous, okay? 167 00:08:25.180 --> 00:08:27.300 Let's see for now if this worked. 168 00:08:27.300 --> 00:08:29.500 And indeed, it did. 169 00:08:29.500 --> 00:08:31.910 So it replaced the string that we had here before 170 00:08:31.910 --> 00:08:33.640 with this anonymous. 171 00:08:33.640 --> 00:08:36.750 And so let's remember why this works. 172 00:08:36.750 --> 00:08:40.610 Well, once again, it is because of short circuiting. 173 00:08:40.610 --> 00:08:43.550 And in the particular case of the and operator, 174 00:08:43.550 --> 00:08:46.860 it short circuits when the first value is falsy, 175 00:08:46.860 --> 00:08:50.660 and then immediately returns that falsy value. 176 00:08:50.660 --> 00:08:53.460 So in this case, that's not what happening. 177 00:08:53.460 --> 00:08:55.720 So this is truthy right now 178 00:08:55.720 --> 00:08:57.440 and so therefore, the second value 179 00:08:57.440 --> 00:09:00.293 will then actually be evaluated and returned. 180 00:09:01.260 --> 00:09:02.940 So if we duplicated this, 181 00:09:05.780 --> 00:09:06.813 like this, 182 00:09:07.730 --> 00:09:09.870 then you see that it's now actually being set 183 00:09:09.870 --> 00:09:13.510 to undefined because well, 184 00:09:13.510 --> 00:09:16.660 the restaurant1.owner does not exist. 185 00:09:16.660 --> 00:09:18.310 So that property is not here 186 00:09:18.310 --> 00:09:20.450 and so this value is undefined. 187 00:09:20.450 --> 00:09:22.950 And since the and operator short circuits 188 00:09:22.950 --> 00:09:25.780 when the first value is falsy, 189 00:09:25.780 --> 00:09:27.520 well, then that is the value 190 00:09:27.520 --> 00:09:29.023 that is immediately returned. 191 00:09:30.400 --> 00:09:33.670 So again, we already learned about that a little bit earlier 192 00:09:33.670 --> 00:09:34.700 in the section, 193 00:09:34.700 --> 00:09:36.910 and so that's why I'm not going really deep 194 00:09:36.910 --> 00:09:39.870 into the details here once again. 195 00:09:39.870 --> 00:09:41.700 What I will go into detail 196 00:09:41.700 --> 00:09:45.860 is that we can now replace once again 197 00:09:45.860 --> 00:09:48.650 this duplicate variable here. 198 00:09:48.650 --> 00:09:52.583 So basically replacing it with the and assignment operator. 199 00:09:53.960 --> 00:09:56.200 So for doing that, I can write rest1 200 00:09:57.688 --> 00:10:02.688 && equal, and then here let's just copy this string. 201 00:10:05.310 --> 00:10:08.383 All right, and copying it for restaurant two. 202 00:10:09.782 --> 00:10:12.470 And I can then comment these two out 203 00:10:13.340 --> 00:10:15.570 and just for the sake of completeness, 204 00:10:15.570 --> 00:10:17.513 let's also write it here. 205 00:10:20.608 --> 00:10:22.370 Now, and we get an error here 206 00:10:22.370 --> 00:10:23.203 and that's, of course, 207 00:10:23.203 --> 00:10:26.300 because I forget the number of guests, 208 00:10:26.300 --> 00:10:30.083 and actually, it is .owner, of course. 209 00:10:31.460 --> 00:10:33.090 So .owner. 210 00:10:33.090 --> 00:10:35.710 Let's see, and there we go. 211 00:10:35.710 --> 00:10:38.890 So the owner has been replaced with anonymous in this case, 212 00:10:38.890 --> 00:10:41.900 and here in the case of the first restaurant, 213 00:10:41.900 --> 00:10:43.848 the result is even better now 214 00:10:43.848 --> 00:10:45.130 than what we had before 215 00:10:45.130 --> 00:10:47.320 because with this code here, 216 00:10:47.320 --> 00:10:50.530 we actually had the owner then set to undefined, 217 00:10:50.530 --> 00:10:52.650 which was not really what we wanted. 218 00:10:52.650 --> 00:10:54.540 Now it is simply not here. 219 00:10:54.540 --> 00:10:57.080 And so basically, what the logical 220 00:10:57.080 --> 00:10:59.070 and assignment operator does 221 00:10:59.070 --> 00:11:01.720 is to assign a value to a variable 222 00:11:01.720 --> 00:11:03.733 if it is currently truthy. 223 00:11:04.590 --> 00:11:06.120 All right. 224 00:11:06.120 --> 00:11:08.860 So clearly, this here was falsy 225 00:11:08.860 --> 00:11:10.820 because it didn't exist. 226 00:11:10.820 --> 00:11:12.630 And so then nothing happened. 227 00:11:12.630 --> 00:11:15.260 So the object stayed exactly the same. 228 00:11:15.260 --> 00:11:19.210 Then here this here was indeed truthy, 229 00:11:19.210 --> 00:11:22.150 so it was Giovanni before. 230 00:11:22.150 --> 00:11:25.750 And so it was replaced now with this other string. 231 00:11:25.750 --> 00:11:29.130 And so again, if you ever need to assign a value 232 00:11:29.130 --> 00:11:31.970 to a variable that is already defined, 233 00:11:31.970 --> 00:11:34.860 so that has a value that is currently truthy, 234 00:11:34.860 --> 00:11:38.033 then you can use this and assignment operator.