Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
16283
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.