‫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, 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 log 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 got 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.
‫Now, this is not what we want, so let's put it back.
‫And now 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 the 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 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 in 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 now, 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 updatedBook.
‫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
‫when 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.
‫Not simply used this date.
‫Now this date 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 loggings 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 pages 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 then 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 override 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 Celeste
‫and will therefore then override 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 override existing ones
‫this is how we do it.
‫So we use the spread operator
‫and the same is true for a race.
‫So very, very important.
‫So it's fundamental that you know this
‫as we go through the course.