const - JS | lectureData Structures, Modern Operators & Strings

More modern than the nullish coalescing operator that we talked about in the previous lecture are three new so-called logical assignment operators that were introduced in ES 2021. Let's see how they work!

To show you how they work in an effective way, let's start by creating two new restaurant objects.

const restaurant1 = {
  name: 'Bali',
  numberOfGuests: 20,
};

const restaurant2 = {
  name: 'Capri',
  owner: 'Jacob',
};

The first thing we will do will be to set a default number of guests for all the restaurant objects that do not have that property. In this case, it is going to be the restaurant Capri. But let's pretend that we got them from somewhere, like an API, and now we want to apply something to all of them.

We will start by using the OR operator since we already know how that works.

restaurant2.numberOfGuests = restaurant2.numberOfGuests || 10;

Let's quickly remember that this works because of short-circuiting. Just in case you don't remember, in the or operator, if the first value (restaurant2.numberOfGuests) is truthy, then it will immediately be returned, and the second value (10) will not even be evaluated.

You can see from the above image that restaurant two (Capri) didn't have numberOfGuests, and now numberOfGuests is 10. Again, that is because of short-circuiting. The value returned by restaurant2.numberOfGuests was undefined, hence the second value (10) got returned, while in the first restaurant, the initial value was 20, and it is the same 20 that immediately got returned. Nothing new up until this point.

Now let me introduce the very first logical assignment operator, which is the OR assignment operator. With this operator, we will be able to write the same thing in a more concise way.

restaurant1.numberOfGuests ||= 10;restaurant2.numberOfGuests ||= 10;

If you try this you will see that the result is exactly the same as what we had before. All this operator does is to asssign a value to a variable if that variable is currently falsy. In this cas, restaurant2.numberOfGuests is currently falsy hence it wil be assigned the value of 10.

This operator works great except in one situation. We actually encountered this situation in the previous lecture, but anyway let me show you.

Let change restaurant1 a little...

// I guess you now remember... 😏
const restaurant1 = {
  name: 'Bali',
  // Zero is a perfectly reasonable number that we might want to assign...
  numberOfGuests: 0,
};

// Let's now run the OR assignment operator again and see what happens ...

restaurant1.numberOfGuests ||= 10;

console.log(restaurant1)

You can see that in restaurant1, numberOfGuests is back to being 10, even though we set it to zero initially. So can you guess why that's happening based on the last previous lecture? Well, it's because zero is a falsy value, hence the OR assignment operator is actually working just fine.

So right now, restaurant1.numberOfGuests is falsy, and so, therefore, it will then be assigned the second operand which is 10. Which is exactly what the logical OR operator does. So again, the logical OR assignment operator will assign a value to a variable if that exact variable is falsy.

However, we have a good way of solving this! We use the logical nullish assignment operator (Yeah I know how you feel reading that...😐). It sounds a bit complicated but all we have to do is to change the OR for the nullish coalescing operator.

restaurant1.numberOfGuests ??= 10;

You can now see that on restaurant1 we are back to zero on numberOfGuests. Let's just remember here that nullish means null or undefined. This means that if we tried the same operation with restaurant2, numberOfGuests will be undefined, hence, 10 will be assigned to it. In a nutshell, the nullish assignment operator will assign a value to a variable if that exact value is currently nullish.

As you might have probably guessed we do also have the logical AND operator. To show you how it works, let's say we want to anonymize the names of the restaurant owners. So when there currently is an owner, like in restaurant2 ('Jacob'), we want to replace that string with the string 'anonymous'. Can you guess how we could do that using the tools we already know?

Let's start just with the AND operator...

restaurant2.owner = restaurant2.owner && 'anonymous';

From the above result you can see that we were able to replace the string that we had before with the string 'anonymous'. Let's recall why this works. Once again, it works 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. In this case that's not what's happening. restaurant2.owner is currently a truthy value, hence, the second value ('anonymous') will be evaluated and returned.

Let me do the same thing with restaurant1 so that you can actually see the difference.

restaurant1.owner = restaurant1.owner && 'anonymous';

You now see that owner in restaurant1 is set to undefined because, restaurant1.owner does not exist. And since the AND operator short circuits when the first value is falsyn well, then that is the value that is immediately returned. We already learned about this a the previous lectures, so I'm not going deep into the details once again.

Let's now have a look at the AND logical assignment operator!

restaurant1.owner &&= 'anonymous';
restaurant2.owner &&= 'anonymous';

From the above result we can see that the owner property in restaurant2 has been replaced by the string 'anonymous', and in the case of restaurant1, the result is even better now than what we had before; because, with the previous code that we had, the property owner was set to undefined which was not really what we wanted.

So basically, what the logical and assignment operator does is assign a value to a variable if it is currently truthy. So clearly, restaurant1.owner was falsy because it didn't exist, and so nothing happened. The object stayed exactly the same. On the other hand, restaurant2.owner was truthy, so it was Jacob before, and now it has been replaced by the string 'anonymous'.

To finish, if you ever need to assign a value to a variable that is already defined and currently truthy, then you can use this and asignment operator.