Original subtitles

Now, even more modern

that the nullish coalescing operator

that we just talked about

are three new so-called logical assignment operators

that were introduced in ES 2021.

So let's see how they work.

And in order to do that in an effective way,

let's quickly start by creating two new restaurant object.

So I'm gonna call then restaurant one

and restaurant two.

And they are extremely simple.

They just have a name

and then this one has a property,

number of guests,

and let's set it to 20 here.

And then there will also be a restaurant two.

And, in fact, let's just duplicate this one here.

Restaurant two.

Call this on La Piazza.

And this one actually

doesn't have the number of guests property

but it has an owner.

So Giovanni Rossi, or whatever.

Okay, and the first thing that we want to do now

is to set a default number of guests

for all the restaurant objects

that do not have that property.

So in this case, it is just this restaurant here

but let's pretend that we got them

so that we got these restaurants from some kind of API,

and now we want to apply something to all of them.

So in this case,

basically adding the number of guests property

to the objects that do not have them.

And let's start by using the tool that we already know about

to do this.

And so that is the or operator.

So we already know how we can do this using

the or operator, right?

So let's say rest2

.number of guests should be equal to rest1.numGuests

or 10.

So let's quickly remember that this works

because of short circuiting.

So in the or operator,

if the first value is truthy,

so this one here, then that first value

will immediately be returned and the second value

will not even be evaluated.

So that's this one here.

And so by doing this,

and here actually should be numGuests,

so again by doing this,

here we are returning the number of guests

if it does exist, so if it's not falsy,

and otherwise, the 10 is going to be returned.

Okay?

And in fact, let's duplicate this line here.

But first, I should fix it

because, of course, the number of guests in restaurant two

should be set based on the number

of guests that are in restaurant two or not.

But anyway, duplicating this now

and then doing it for both restaurants here

so that we can see the result

here for both objects.

So let's see.

And here we go.

So the second one here didn't have a number of guests

and so now numGuests is 10.

And again, that is because of short circuiting.

So this here returned undefined

and so then the second one got returned,

while here in this one,

this value was 20

and so it is this 20 that immediately got returned.

So nothing new up until this point

but now let me introduce

the very first logical assignment operator,

which is the or assignment operator.

So with that operator,

we will be able to write the same thing basically

in a more concise way.

So rest1.numGuests,

and now instead of repeating the same thing again

like I did here,

I can simply write or equal and then 10.

And that's it.

So this here is exactly the same as this one

but in a more concise way.

Okay?

Let's do the same for restaurant two.

And if we comment out these two now,

then as you see the result is exactly the same.

Great.

So let's write here the OR assignment operator.

And basically, this operator assigns a variable

to a variable if that variable is currently falsy.

So again, exactly what's happening here

because this variable is currently falsy

and so it will be assigned the value of 10.

Great, so that works beautifully,

except in one situation.

That actually we already encountered before

in the previous lecture.

So let's actually duplicate this here.

Comment out this one.

And now setting the number of guests to zero,

which is a perfectly reasonable number, right?

But look what happens if I then run this code again.

As we can see here,

it is back to being 10,

even though we set it to zero here.

So can you guess why that is happening

based on what we learned in the last lecture?

Well, zero is actually a falsy value,

and so this OR assignment operator

is actually working just fine.

So this here right now is falsy

and so therefore, it will then be assigned this value of 10,

which is exactly what this operator does.

So again, the logical OR assignment operator

will assign a value to a variable

if that exact variable is falsy right now.

However, fortunately, we have a good way of solving this.

So let's copy all of this, put it here,

comment out these two

because they don't really work.

And so here we actually do also have

the logical nullish assignment operator.

Sounds a bit complicated

but really all it is

is to change the or for the nullish coalescing operator.

So let's actually write that also here.

Nullish assignment operator.

So if I save it now,

then it is back to zero here.

And that is exactly the correct result here.

Let's just remember here

that nullish basically means null

or undefined, and right here in restaurant two,

the number of guests is undefined

and so therefore, then the 10 will be assigned

to that variable.

And so in a nutshell,

the nullish assignment operator

will assign a value to a variable

if that exact variable is currently nullish.

So again, that is the case in restaurant number two.

Okay.

And as you can probably guess,

we do also have the logical and assignment operator.

And to learn about that one,

let's say that we want to anonymize the names

of the restaurant owners.

So when there currently is an owner,

like here in this object,

we want to basically replace this string here

with the string anonymous.

So how could we do that again using the tools

that we already know?

Well, let's say rest2.owner

and now let's use for now just an and operator.

So we can say rest2.owner

and then let's write it like this.

Anonymous, okay?

Let's see for now if this worked.

And indeed, it did.

So it replaced the string that we had here before

with this anonymous.

And so let's remember why this works.

Well, once again, it is because of short circuiting.

And in the particular case of the and operator,

it short circuits when the first value is falsy,

and then immediately returns that falsy value.

So in this case, that's not what happening.

So this is truthy right now

and so therefore, the second value

will then actually be evaluated and returned.

So if we duplicated this,

like this,

then you see that it's now actually being set

to undefined because well,

the restaurant1.owner does not exist.

So that property is not here

and so this value is undefined.

And since the and operator short circuits

when the first value is falsy,

well, then that is the value

that is immediately returned.

So again, we already learned about that a little bit earlier

in the section,

and so that's why I'm not going really deep

into the details here once again.

What I will go into detail

is that we can now replace once again

this duplicate variable here.

So basically replacing it with the and assignment operator.

So for doing that, I can write rest1

&& equal, and then here let's just copy this string.

All right, and copying it for restaurant two.

And I can then comment these two out

and just for the sake of completeness,

let's also write it here.

Now, and we get an error here

and that's, of course,

because I forget the number of guests,

and actually, it is .owner, of course.

So .owner.

Let's see, and there we go.

So the owner has been replaced with anonymous in this case,

and here in the case of the first restaurant,

the result is even better now

than what we had before

because with this code here,

we actually had the owner then set to undefined,

which was not really what we wanted.

Now it is simply not here.

And so basically, what the logical

and assignment operator does

is to assign a value to a variable

if it is currently truthy.

All right.

So clearly, this here was falsy

because it didn't exist.

And so then nothing happened.

So the object stayed exactly the same.

Then here this here was indeed truthy,

so it was Giovanni before.

And so it was replaced now with this other string.

And so again, if you ever need to assign a value

to a variable that is already defined,

so that has a value that is currently truthy,

then you can use this and assignment operator.