1 00:00:01,110 --> 00:00:03,150 ‫Now moving on, let's quickly learn 2 00:00:03,150 --> 00:00:06,123 ‫about the rest and the spread operator. 3 00:00:07,530 --> 00:00:10,200 ‫And let's go back here to this line of code 4 00:00:10,200 --> 00:00:13,380 ‫where we did the destructuring in the previous lecture. 5 00:00:13,380 --> 00:00:15,600 ‫So, we took out this primary genre 6 00:00:15,600 --> 00:00:19,170 ‫and the secondary genre out of this array. 7 00:00:19,170 --> 00:00:20,040 ‫And now let's say 8 00:00:20,040 --> 00:00:23,580 ‫that we also wanted to get all the other genres, 9 00:00:23,580 --> 00:00:25,680 ‫so the ones that are not the first 10 00:00:25,680 --> 00:00:28,800 ‫and the second one into another array, 11 00:00:28,800 --> 00:00:32,880 ‫so basically into an array containing all the other genres. 12 00:00:32,880 --> 00:00:36,270 ‫And for that we can use the rest operator. 13 00:00:36,270 --> 00:00:39,660 ‫So here we can simply write, dot, dot, dot 14 00:00:39,660 --> 00:00:41,673 ‫and then give it any name that we want. 15 00:00:42,870 --> 00:00:45,930 ‫So let's say other genres. 16 00:00:45,930 --> 00:00:48,600 ‫And so this will automatically create an array 17 00:00:48,600 --> 00:00:51,120 ‫which contains all the values that we haven't 18 00:00:51,120 --> 00:00:52,320 ‫previously destructured. 19 00:00:54,090 --> 00:00:55,713 ‫So let's log that here. 20 00:00:58,740 --> 00:01:01,383 ‫And indeed, here it is. 21 00:01:03,030 --> 00:01:06,210 ‫So we took out science fiction and humor, 22 00:01:06,210 --> 00:01:10,410 ‫which remember is the first and the second one, 23 00:01:10,410 --> 00:01:13,740 ‫and then we got an array with the third, the fourth 24 00:01:13,740 --> 00:01:14,853 ‫and the last one. 25 00:01:16,350 --> 00:01:18,390 ‫So exactly what we wanted. 26 00:01:18,390 --> 00:01:22,290 ‫And, of course, if here we didn't have this one, then 27 00:01:22,290 --> 00:01:27,150 ‫this other genres would also contain the secondary genre. 28 00:01:27,150 --> 00:01:31,410 ‫So then only primary genre would be right here. 29 00:01:31,410 --> 00:01:32,610 ‫So would be this one, 30 00:01:32,610 --> 00:01:35,733 ‫and then the other genres would be all the other ones. 31 00:01:37,590 --> 00:01:41,190 ‫Now, this is not what we want, so let's put it back. 32 00:01:41,190 --> 00:01:43,950 ‫And now just one important thing about this is 33 00:01:43,950 --> 00:01:45,750 ‫that we can only place this here 34 00:01:45,750 --> 00:01:49,410 ‫in the end of the destructuring operation. 35 00:01:49,410 --> 00:01:53,463 ‫So placing this like here wouldn't make a lot of sense. 36 00:01:54,930 --> 00:01:57,960 ‫So this immediately gives us here an error saying 37 00:01:57,960 --> 00:01:59,970 ‫that the rest element must be the last 38 00:01:59,970 --> 00:02:01,563 ‫in the destructuring pattern. 39 00:02:04,290 --> 00:02:06,743 ‫Okay, so let's again go back 40 00:02:06,743 --> 00:02:11,403 ‫and that's actually it for the rest operator. 41 00:02:12,330 --> 00:02:13,770 ‫Now, what's a bit confusing 42 00:02:13,770 --> 00:02:16,560 ‫about this is that the same syntax, 43 00:02:16,560 --> 00:02:20,970 ‫so the three dots, is also used for the spread operator, 44 00:02:20,970 --> 00:02:24,870 ‫which is a bit more common than the rest operator. 45 00:02:24,870 --> 00:02:27,930 ‫So the spread operator, we use it actually all the time. 46 00:02:27,930 --> 00:02:30,660 ‫It's really important and very common. 47 00:02:30,660 --> 00:02:32,340 ‫And, just like destructuring, 48 00:02:32,340 --> 00:02:36,270 ‫we can also use it both on arrays and objects. 49 00:02:36,270 --> 00:02:40,320 ‫And let's start to look here at arrays first. 50 00:02:40,320 --> 00:02:43,350 ‫So let's say that we want to create a new array 51 00:02:43,350 --> 00:02:47,043 ‫with all the genres, but add a new one to the end. 52 00:02:48,000 --> 00:02:49,563 ‫So how could we do that? 53 00:02:53,880 --> 00:02:57,243 ‫Let's say new genres. 54 00:02:59,010 --> 00:03:01,920 ‫So, we want a new array, as we said, right, 55 00:03:01,920 --> 00:03:04,290 ‫containing all the current genres 56 00:03:04,290 --> 00:03:06,210 ‫and then another one in the end. 57 00:03:06,210 --> 00:03:10,435 ‫So we could try to just add genres here 58 00:03:10,435 --> 00:03:15,435 ‫and then let's say epic fantasy. 59 00:03:17,790 --> 00:03:20,790 ‫So let's see what that would get us. 60 00:03:20,790 --> 00:03:23,220 ‫But immediately we see that this is not exactly 61 00:03:23,220 --> 00:03:27,397 ‫what we wanted because we now have an array, which contains, 62 00:03:27,397 --> 00:03:32,397 ‫of course, the epic fantasy, but then also another array. 63 00:03:32,730 --> 00:03:35,520 ‫So we simply have the entire genres array 64 00:03:35,520 --> 00:03:38,520 ‫and then the genre that we wanted to add. 65 00:03:38,520 --> 00:03:40,050 ‫But this is not what we want. 66 00:03:40,050 --> 00:03:42,360 ‫We want one array which contains all 67 00:03:42,360 --> 00:03:44,550 ‫of these values here individually. 68 00:03:44,550 --> 00:03:46,260 ‫So all of these six genres 69 00:03:46,260 --> 00:03:50,340 ‫one by one and not one array, which contains five genres 70 00:03:50,340 --> 00:03:54,870 ‫and then simply the other genre in the end. 71 00:03:54,870 --> 00:03:59,430 ‫So what we can do is to use the spread operator. 72 00:03:59,430 --> 00:04:03,330 ‫So the spread operator, as I said, has the same syntax. 73 00:04:03,330 --> 00:04:06,330 ‫So we can simply write this here, 74 00:04:06,330 --> 00:04:10,140 ‫and what this will do is to basically take all the values 75 00:04:10,140 --> 00:04:14,580 ‫out of the array and place them here one by one. 76 00:04:14,580 --> 00:04:17,850 ‫So you can imagine, as if this would be converted 77 00:04:17,850 --> 00:04:21,600 ‫into simply writing these genres here one by one. 78 00:04:21,600 --> 00:04:25,110 ‫So taking them out of the array, placing them here. 79 00:04:25,110 --> 00:04:27,960 ‫And so since we're building a new array here 80 00:04:27,960 --> 00:04:29,760 ‫we will then get this new array 81 00:04:29,760 --> 00:04:32,490 ‫which contains all these individual values, 82 00:04:32,490 --> 00:04:36,360 ‫and, at the end, epic fantasy now, right? 83 00:04:36,360 --> 00:04:38,640 ‫So this is really, really helpful, 84 00:04:38,640 --> 00:04:41,340 ‫and, of course, we could also place it at the end. 85 00:04:41,340 --> 00:04:44,220 ‫And then epic fantasy would simply be 86 00:04:44,220 --> 00:04:46,680 ‫at the beginning of the new array. 87 00:04:46,680 --> 00:04:50,295 ‫So just like this, great. 88 00:04:50,295 --> 00:04:54,000 ‫So this is how the spread operator works with arrays. 89 00:04:54,000 --> 00:04:55,050 ‫But now let's move on 90 00:04:55,050 --> 00:04:59,190 ‫to objects where the spread operator is even more important 91 00:04:59,190 --> 00:05:02,010 ‫because it allows us to add new properties 92 00:05:02,010 --> 00:05:04,293 ‫and also to update existing ones. 93 00:05:05,700 --> 00:05:09,573 ‫So let's create a variable called updatedBook. 94 00:05:11,700 --> 00:05:14,880 ‫And let's say that now we wanted to create a new object 95 00:05:14,880 --> 00:05:18,570 ‫based on the current book, but which has a new property. 96 00:05:18,570 --> 00:05:21,720 ‫And that new property, for example, can be the movie 97 00:05:21,720 --> 00:05:23,100 ‫publication date. 98 00:05:23,100 --> 00:05:26,808 ‫So we already have a publication date property here 99 00:05:26,808 --> 00:05:30,750 ‫and we also have a movie adaptation. 100 00:05:30,750 --> 00:05:34,080 ‫And so we can now also create a property which says 101 00:05:34,080 --> 00:05:37,770 ‫when the movie was actually published. 102 00:05:37,770 --> 00:05:40,620 ‫Now, this book here doesn't actually have a movie, 103 00:05:40,620 --> 00:05:42,510 ‫but that's not really the point here. 104 00:05:42,510 --> 00:05:43,830 ‫That doesn't really matter. 105 00:05:43,830 --> 00:05:46,710 ‫We're just learning how to do this. 106 00:05:46,710 --> 00:05:50,310 ‫So, let's try to create this updated book object, 107 00:05:50,310 --> 00:05:55,290 ‫just like we did before by using the current book object 108 00:05:55,290 --> 00:05:58,800 ‫and then adding a property here saying 109 00:05:58,800 --> 00:06:02,400 ‫movie publication date. 110 00:06:07,320 --> 00:06:09,753 ‫Not simply used this date. 111 00:06:11,310 --> 00:06:13,590 ‫Now this date is actually the publication 112 00:06:13,590 --> 00:06:17,010 ‫of the movie of the first 'Lord of the Rings' book, 113 00:06:17,010 --> 00:06:18,843 ‫which I think is book number one. 114 00:06:20,160 --> 00:06:22,394 ‫And so let's just to make this right, 115 00:06:22,394 --> 00:06:25,773 ‫let's get the book number one here. 116 00:06:27,150 --> 00:06:29,850 ‫So you see immediately everything updates here. 117 00:06:29,850 --> 00:06:32,550 ‫So all these loggings that we have 118 00:06:32,550 --> 00:06:37,290 ‫all these genres here, of course, but what we're interested 119 00:06:37,290 --> 00:06:41,927 ‫in here is the updated book, right? 120 00:06:42,960 --> 00:06:47,250 ‫And again, to inspect this, let's open up here this sidebar. 121 00:06:47,250 --> 00:06:51,180 ‫And just like before, this is really not what we wanted. 122 00:06:51,180 --> 00:06:54,960 ‫So inside this book, we now have another book property 123 00:06:54,960 --> 00:06:56,910 ‫which contains the book itself 124 00:06:56,910 --> 00:07:00,423 ‫plus this new movie publication date property. 125 00:07:01,320 --> 00:07:02,730 ‫So this is not what we want. 126 00:07:02,730 --> 00:07:06,120 ‫Instead, we want one big object which contains all 127 00:07:06,120 --> 00:07:08,520 ‫of this and this new property. 128 00:07:08,520 --> 00:07:11,130 ‫And so the solution, just like before, is 129 00:07:11,130 --> 00:07:14,550 ‫to simply spread out all the properties of this book 130 00:07:14,550 --> 00:07:17,200 ‫object into the new object, 131 00:07:17,200 --> 00:07:20,970 ‫and immediately you see how it updated here, 132 00:07:20,970 --> 00:07:25,970 ‫and now everything is simply inside the updated book object. 133 00:07:26,250 --> 00:07:29,250 ‫Great. So this is how we add new properties 134 00:07:29,250 --> 00:07:32,130 ‫to an object using the spread operator. 135 00:07:32,130 --> 00:07:33,810 ‫But, as I said in the beginning, 136 00:07:33,810 --> 00:07:37,860 ‫we can also use it to basically update properties, 137 00:07:37,860 --> 00:07:40,354 ‫so by simply overriding them. 138 00:07:40,354 --> 00:07:43,680 ‫So we see that we have this pages property 139 00:07:43,680 --> 00:07:47,100 ‫but let's imagine for some reason that it is wrong. 140 00:07:47,100 --> 00:07:49,533 ‫And so we can simply overwrite that here. 141 00:07:52,350 --> 00:07:55,470 ‫So let's say the number of pages is actually 1210. 142 00:08:00,270 --> 00:08:02,460 ‫So if we inspect that again, 143 00:08:02,460 --> 00:08:05,970 ‫then you see that now it is actually 1210. 144 00:08:05,970 --> 00:08:07,680 ‫And the reason that works is 145 00:08:07,680 --> 00:08:10,350 ‫because, as I mentioned in the beginning, 146 00:08:10,350 --> 00:08:13,950 ‫this syntax here basically takes all the elements, 147 00:08:13,950 --> 00:08:18,300 ‫so all the properties of the object, into this new object. 148 00:08:18,300 --> 00:08:22,140 ‫And then of course will contain the original pages property. 149 00:08:22,140 --> 00:08:25,050 ‫And so then we have two pages properties 150 00:08:25,050 --> 00:08:26,700 ‫and so then the second one, 151 00:08:26,700 --> 00:08:30,600 ‫so this last one, will override the first one. 152 00:08:30,600 --> 00:08:34,950 ‫So if we place this one first, which is perfectly valid, 153 00:08:34,950 --> 00:08:37,260 ‫then you will see that it goes back 154 00:08:37,260 --> 00:08:41,970 ‫to 1216 because then the pages property coming 155 00:08:41,970 --> 00:08:44,310 ‫from right here is Celeste 156 00:08:44,310 --> 00:08:46,713 ‫and will therefore then override this one. 157 00:08:48,300 --> 00:08:50,400 ‫So whenever we want to do this, 158 00:08:50,400 --> 00:08:53,643 ‫the spread-out original object needs to be first. 159 00:08:57,360 --> 00:08:59,220 ‫So just writing out what we did here, 160 00:08:59,220 --> 00:09:00,790 ‫adding a new property 161 00:09:05,310 --> 00:09:10,310 ‫and then overriding an existing property. 162 00:09:10,800 --> 00:09:12,330 ‫And I'm focusing so much here 163 00:09:12,330 --> 00:09:14,130 ‫on this because this is going to be 164 00:09:14,130 --> 00:09:17,280 ‫really, really important when we work with React 165 00:09:17,280 --> 00:09:21,390 ‫because when we want to update objects in state, 166 00:09:21,390 --> 00:09:23,430 ‫which you will learn later what that is, 167 00:09:23,430 --> 00:09:26,430 ‫we will need to use this technique. 168 00:09:26,430 --> 00:09:27,450 ‫And we will also talk 169 00:09:27,450 --> 00:09:30,330 ‫about this a bit later again in this section. 170 00:09:30,330 --> 00:09:31,860 ‫But for now, just keep in mind 171 00:09:31,860 --> 00:09:35,130 ‫that when we want to create a new object 172 00:09:35,130 --> 00:09:39,240 ‫and then add new properties to it or override existing ones 173 00:09:39,240 --> 00:09:40,260 ‫this is how we do it. 174 00:09:40,260 --> 00:09:42,930 ‫So we use the spread operator 175 00:09:42,930 --> 00:09:45,630 ‫and the same is true for a race. 176 00:09:45,630 --> 00:09:47,070 ‫So very, very important. 177 00:09:47,070 --> 00:09:49,020 ‫So it's fundamental that you know this 178 00:09:49,020 --> 00:09:50,673 ‫as we go through the course.