All language subtitles for 3. RestSpread Operator

Now moving on, let's quickly learn about the rest and the spread operator.

And let's go back here to this line of code where we did the Destructuring in the previous lecture.

So where we took out this primary genre and the secondary genre out of this array.

And now let's say that we also wanted to get all the other genres.

So the ones that are not the first and the second one into another array.

So basically into an array containing all the other genres and for that we can use the rest.

Operator.

So here we can simply write dot, dot, dot and then give it any name that we want.

So let's say other genres.

And so this will automatically create an array which contains all the values that we haven't previously.

Destructured.

So let's lock that here.

And indeed, here it is.

So we took out science fiction and humor, which remember is the first and the second one.

And then we get an array with the third, the fourth and the last one.

So exactly what we wanted.

And of course, if here we didn't have this one, then this other genres would also contain the secondary

genre.

So then only primary genre would be right here, so would be this one.

And then the other genres would be all the other ones.

No, this is not what we want.

So let's put it back and I'll just one important thing about this is that we can only place this here

in the end of the Destructuring operation.

So placing this like here wouldn't make a lot of sense.

So this immediately gives us here an error, saying that a rest element must be the last in the destructuring

pattern.

Okay, So let's again go back and that's actually it for the rest Operator.

Now, what's a bit confusing about this is that the same syntax?

So the three dots is also used for the spread operator, which is a bit more common than the rest operator.

So the spread operator, we use it actually all the time.

It's really important and, and very common.

And just like Destructuring, we can also use it both on arrays and objects.

And let's start to look here at arrays first.

So let's say that we want to create a new array with all the genres, but add a new one to the end.

So how could we do that?

Let's say new.

Genres.

So we want a new array, as we said, right.

Containing all the current genres and then another one at the end.

So we could try to just add genres here.

And then, let's say epic fantasy.

So let's see what that would get us.

But immediately we see that this is not exactly what we wanted because we now have an array which contains,

of course, the epic fantasy, but then also another array.

So we simply have the entire genres array and then the genre that we wanted to add.

But this is not what we want.

We want one array which contains all of these values here individually.

So all of these six genres, one by one and not one array, which contains five genres and then simply

the other genre in the end.

So what we can do is to use the spread operator.

So the spread operator, as I said, has the same syntax.

So we can simply write this here.

And what this will do is to basically take all the values out of the array and place them here one by

one.

So you can imagine as if this would be converted into simply writing these genres here one by one.

So taking them out of the array, placing them here.

And so since we're building a new array here, we will then get this new array which contains all these

individual values and at the end, epic fantasy.

All right.

So this is really, really helpful.

And of course, we could also place it at the end.

And then Epic Fantasy would simply be at the beginning of the new array.

So just like this.

Great.

So this is how the spread operator works with arrays.

But now let's move on to objects where the spread operator is even more important because it allows

us to add new properties and also to update existing ones.

So let's create a variable called.

Update it.

Book.

And let's say that now.

We wanted to create a new object based on the current book, but which has a new property.

And that new property, for example, can be the movie publication date.

So we already have a publication date property here and we also have a movie adaptation.

And so we can now also create a property which says one, the movie was actually published.

Now this book here doesn't actually have a movie, but that's not really the point here.

That doesn't really matter.

We're just learning how to do this.

So let's try to create this updated book object, just like we did before by using.

The current book object and then adding a property here.

Saying movie.

Publication.

Date.

And let's simply use this date.

This state is actually the publication of the movie of the First Lord of the Rings book, which I think

is book number one.

And so let's just to make this right.

Let's get the book number one here.

So you see immediately everything updates here.

So all these lodgings that we have, all these genres here, of course.

But what we're interested in here is.

The updated book.

Right.

And again, to inspect this, let's open up here this sidebar.

And just like before, this is really not what we wanted.

So inside this book, we now have another book property which contains the book itself, plus this new

movie publication, Date Property.

So this is not what we want.

Instead, we want one big object which contains all of this and this new property.

And so the solution, just like before, is to simply spread out all the properties of this book object

into the new object.

And immediately you see how it updated here and now everything is simply inside the updated book object.

Great.

So this is how we add new properties to an object using the spread operator.

But as I said in the beginning, we can also use it to basically update properties so by simply overriding

them.

So we see that we have this page's property.

But let's imagine for some reason that it is wrong.

And so we can simply overwrite that here.

So let's say the number of pages is actually.

1210.

So if we inspect that again, then you see that now it is actually 1210.

And the reason that works is because, as I mentioned in the beginning, this syntax here basically

takes all the elements.

So all the properties of the object into this new object.

And that of course will contain the original pages property.

And so then we have two pages, properties.

And so then the second one, so this last one will overwrite the first one.

So if we place this one first, which is perfectly valid, then you will see that it goes back to 1216

because then the pages property coming from right here is last and will therefore then overwrite this

one.

So whenever we want to do this, the spread out original object needs to be first.

So just writing out what we did here, adding a new property.

And then.

Overriding an existing property.

And I'm focusing so much here on this because this is going to be really, really important when we

work with React.

Because when we want to update objects in state, which you will learn later what that is, we will

need to use this technique and we will also talk about this a bit later again in this section.

But for now, just keep in mind that when we want to create a new object and then add new properties

to it or overwrite existing ones, this is how we do it.

So we use the spread operator.

And the same is true for arrays.

So very, very important.

So it's fundamental that you know this as we go through the course.