Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,310 --> 00:00:03,150 Let's start this section 2 2 00:00:03,150 --> 00:00:05,883 by learning about array destructuring. 3 3 00:00:07,320 --> 00:00:09,690 So, as I said in the intro video, 4 4 00:00:09,690 --> 00:00:12,840 in this section we're basically gonna continue learning 5 5 00:00:12,840 --> 00:00:16,740 basic syntax and basic JavaScript features, 6 6 00:00:16,740 --> 00:00:21,270 but now with a focus on more modern JavaScript. 7 7 00:00:21,270 --> 00:00:23,200 And the theme of this section 8 8 00:00:23,200 --> 00:00:26,860 will be to simulate a foot delivery application. 9 9 00:00:26,860 --> 00:00:29,720 And in specific one Italian restaurant 10 10 00:00:29,720 --> 00:00:31,950 which is this starter data here 11 11 00:00:31,950 --> 00:00:34,860 that we already have in the starter files. 12 12 00:00:34,860 --> 00:00:38,190 And so this one is called Classico Italiano. 13 13 00:00:38,190 --> 00:00:41,400 So I already opened up the starter files here 14 14 00:00:41,400 --> 00:00:42,740 for this project. 15 15 00:00:42,740 --> 00:00:44,050 Okay. 16 16 00:00:44,050 --> 00:00:45,890 Now learning complex topics 17 17 00:00:45,890 --> 00:00:49,710 like the ones we're gonna dive into in the section 18 18 00:00:49,710 --> 00:00:52,860 is really best done in isolation. 19 19 00:00:52,860 --> 00:00:55,070 This way you can understand exactly 20 20 00:00:55,070 --> 00:00:56,880 what I'm trying to teach you 21 21 00:00:56,880 --> 00:00:58,590 without having to think about 22 22 00:00:58,590 --> 00:01:01,530 five other things at the same time. 23 23 00:01:01,530 --> 00:01:04,950 And so I'm isolating just this one restaurant 24 24 00:01:04,950 --> 00:01:07,610 and building no user interface 25 25 00:01:07,610 --> 00:01:11,870 so that we can focus just on the JavaScript language here. 26 26 00:01:11,870 --> 00:01:15,390 And some people will say that this is boring 27 27 00:01:15,390 --> 00:01:19,320 but believe me, I do have enough teaching experience 28 28 00:01:19,320 --> 00:01:23,490 to know that some topics are best learned in isolation. 29 29 00:01:23,490 --> 00:01:25,720 And for me, the most important thing 30 30 00:01:25,720 --> 00:01:28,960 is that you will actually learn in this course. 31 31 00:01:28,960 --> 00:01:29,833 Now of course, 32 32 00:01:30,721 --> 00:01:32,530 there are also topics that can be applied 33 33 00:01:32,530 --> 00:01:34,740 to a visual project. 34 34 00:01:34,740 --> 00:01:36,730 And that's why in the next section, 35 35 00:01:36,730 --> 00:01:39,250 we have a really, really cool project 36 36 00:01:39,250 --> 00:01:41,410 with an amazing user interface 37 37 00:01:41,410 --> 00:01:44,560 where we're gonna learn about array methods, 38 38 00:01:44,560 --> 00:01:48,540 but for now let's focus on built in data structures 39 39 00:01:48,540 --> 00:01:51,230 and modern advanced operators. 40 40 00:01:51,230 --> 00:01:54,283 And again, starting with array destructuring. 41 41 00:01:55,220 --> 00:01:58,320 So destructuring is an ESX feature 42 42 00:01:58,320 --> 00:02:01,450 and it's basically a way of unpacking values 43 43 00:02:01,450 --> 00:02:05,900 from an array or an object into separate variables. 44 44 00:02:05,900 --> 00:02:07,910 So in other words destructuring 45 45 00:02:07,910 --> 00:02:11,230 is to break a complex data structure down 46 46 00:02:11,230 --> 00:02:14,970 into a smaller data structure like a variable. 47 47 00:02:14,970 --> 00:02:17,630 So for arrays we use destructuring 48 48 00:02:17,630 --> 00:02:19,880 to retrieve elements from the array 49 49 00:02:19,880 --> 00:02:23,223 and store them into variables in a very easy way. 50 50 00:02:24,230 --> 00:02:27,563 So let's just actually start with a very simple array. 51 51 00:02:29,170 --> 00:02:31,590 And now if we wanted to retrieve each one 52 52 00:02:31,590 --> 00:02:35,200 into its own variable without destructuring, 53 53 00:02:35,200 --> 00:02:36,773 we would do it like this. 54 54 00:02:37,930 --> 00:02:40,650 Let's say we wanted to name them A B C. 55 55 00:02:40,650 --> 00:02:44,250 And so we would write the name of the array, 56 56 00:02:44,250 --> 00:02:46,463 which I totally forgot appear. 57 57 00:02:47,680 --> 00:02:50,980 So our zero and then just duplicating this line 58 58 00:02:51,890 --> 00:02:56,070 which I'm using command or option L four. 59 59 00:02:56,070 --> 00:03:00,110 And I'm not sure if that is actually a shortcut in VS code. 60 60 00:03:00,110 --> 00:03:02,120 Let me see here. 61 61 00:03:02,120 --> 00:03:07,120 And apparently it's not, let's see here duplicate selection. 62 62 00:03:08,260 --> 00:03:10,350 So it's this duplicate selection here 63 63 00:03:10,350 --> 00:03:12,940 and you can set up a shortcut for that. 64 64 00:03:12,940 --> 00:03:14,340 And so I will just do that. 65 65 00:03:17,240 --> 00:03:21,200 So B and so that would be element number one 66 66 00:03:21,200 --> 00:03:24,860 and number two would be C. 67 67 00:03:24,860 --> 00:03:28,400 So that's how we would retrieve these three elements. 68 68 00:03:28,400 --> 00:03:30,350 But now with destructuring 69 69 00:03:30,350 --> 00:03:33,170 we can actually declare all the three variables 70 70 00:03:33,170 --> 00:03:34,870 at the same time. 71 71 00:03:34,870 --> 00:03:38,810 So let me show you how so const 72 72 00:03:38,810 --> 00:03:41,310 and then we use the square brackets. 73 73 00:03:41,310 --> 00:03:44,860 And so that's because we are, destructuring an array. 74 74 00:03:44,860 --> 00:03:48,490 And so now we can declare three variables at the same time. 75 75 00:03:48,490 --> 00:03:51,140 And now I'm not using A B and C 76 76 00:03:51,140 --> 00:03:52,860 because we already used them. 77 77 00:03:52,860 --> 00:03:56,203 So let's go with X Y, and Z, 78 78 00:03:57,150 --> 00:04:02,040 and then I will simply set that equal to the array. 79 79 00:04:02,040 --> 00:04:02,873 And that's it. 80 80 00:04:03,790 --> 00:04:06,600 No, let's actually see them now in the console 81 81 00:04:09,070 --> 00:04:12,120 give it a save, and then we need to start our live server 82 82 00:04:13,977 --> 00:04:14,977 with a new terminal. 83 83 00:04:16,440 --> 00:04:18,840 And actually I can hit the tab key now 84 84 00:04:18,840 --> 00:04:20,460 and it will then automatically write 85 85 00:04:20,460 --> 00:04:21,883 the rest of the command, 86 86 00:04:26,230 --> 00:04:27,633 then close that down. 87 87 00:04:31,740 --> 00:04:32,580 And as you can see 88 88 00:04:32,580 --> 00:04:36,030 here we get to two results, two, three, and four. 89 89 00:04:36,030 --> 00:04:38,220 So the elements of the array. 90 90 00:04:38,220 --> 00:04:41,110 So basically we write this syntax here 91 91 00:04:41,110 --> 00:04:44,070 and then this will become the first element of the array, 92 92 00:04:44,070 --> 00:04:46,540 this the second and this the third. 93 93 00:04:46,540 --> 00:04:51,000 And so this here is destructuring this array here 94 94 00:04:51,000 --> 00:04:52,760 from the right side. 95 95 00:04:52,760 --> 00:04:53,593 Okay. 96 96 00:04:53,593 --> 00:04:57,150 And of course this looks like an array, but it's really not. 97 97 00:04:57,150 --> 00:05:00,140 It's just the destructuring assignment. 98 98 00:05:00,140 --> 00:05:03,680 So whenever JavaScript sees this here on the left side 99 99 00:05:03,680 --> 00:05:08,220 of the equal sign, it knows that it should do destructuring. 100 100 00:05:08,220 --> 00:05:10,520 Now, when you do this just don't forget 101 101 00:05:10,520 --> 00:05:13,933 to actually also declare the variables using const. 102 102 00:05:15,250 --> 00:05:16,530 Okay. 103 103 00:05:16,530 --> 00:05:18,550 And I also wanted to notice that 104 104 00:05:18,550 --> 00:05:20,760 even though we did destructuring 105 105 00:05:20,760 --> 00:05:24,500 which sounds kind of distractive right? 106 106 00:05:24,500 --> 00:05:27,423 The original array is of course not affected. 107 107 00:05:29,520 --> 00:05:33,140 Okay so we are not destroying here the array 108 108 00:05:33,140 --> 00:05:38,140 we are only destructuring so we are unpacking it, okay. 109 109 00:05:38,540 --> 00:05:40,780 And now let's work a little bit with the data 110 110 00:05:40,780 --> 00:05:42,350 from our restaurant. 111 111 00:05:42,350 --> 00:05:46,720 So here we see that we have a couple of arrays actually. 112 112 00:05:46,720 --> 00:05:50,780 So the categories, the starter menu and the main menu. 113 113 00:05:50,780 --> 00:05:54,283 So let's take some elements out of the categories. 114 114 00:05:55,670 --> 00:05:56,600 So let's say 115 115 00:05:58,010 --> 00:06:00,770 and then the destructuring assignment 116 116 00:06:00,770 --> 00:06:04,660 first and second, alright. 117 117 00:06:04,660 --> 00:06:06,120 And so now you see here 118 118 00:06:06,120 --> 00:06:08,760 that we do not have to take all of the elements 119 119 00:06:08,760 --> 00:06:10,260 out of the array. 120 120 00:06:10,260 --> 00:06:13,150 So this will just take the first and the second. 121 121 00:06:13,150 --> 00:06:16,750 So it will simply follow the order of the elements here 122 122 00:06:16,750 --> 00:06:19,403 and we'll basically only take these two. 123 123 00:06:21,100 --> 00:06:24,290 And so now the array from which we want to extract 124 124 00:06:24,290 --> 00:06:27,993 and that's restaurant.categories. 125 125 00:06:31,280 --> 00:06:32,720 Just to take a look now 126 126 00:06:34,840 --> 00:06:37,960 and indeed we get Italian and pizzeria 127 127 00:06:37,960 --> 00:06:41,940 which are exactly the first two elements of the array. 128 128 00:06:41,940 --> 00:06:43,060 But now let's say 129 129 00:06:43,060 --> 00:06:46,447 that we only wanted to take the first category. 130 130 00:06:46,447 --> 00:06:49,550 So this one and a third. 131 131 00:06:49,550 --> 00:06:52,060 So let's say that this one is the main category 132 132 00:06:52,060 --> 00:06:55,120 and this is the secondary for some reason. 133 133 00:06:55,120 --> 00:06:56,360 Well, to do that 134 134 00:06:56,360 --> 00:06:59,913 we simply leave a hole in the destructuring operator. 135 135 00:07:00,930 --> 00:07:03,980 So what I mean is just this. 136 136 00:07:03,980 --> 00:07:07,280 And so now the second element will be skipped 137 137 00:07:07,280 --> 00:07:08,970 to the one that would go here 138 138 00:07:08,970 --> 00:07:13,223 and then this second year simply becomes this third element. 139 139 00:07:15,250 --> 00:07:18,950 And now, so you see it a second now is vegetarian 140 140 00:07:18,950 --> 00:07:22,080 which is element number three alright. 141 141 00:07:22,080 --> 00:07:25,700 And so like this, we don't have to create a variables 142 142 00:07:25,700 --> 00:07:28,640 for all the stuff that we might not even need. 143 143 00:07:28,640 --> 00:07:31,600 So if we only need to take this and this, 144 144 00:07:31,600 --> 00:07:34,610 we just skip the element in the middle okay. 145 145 00:07:37,940 --> 00:07:39,650 And this is really powerful. 146 146 00:07:39,650 --> 00:07:43,490 And we use destructuring to do a lot of cool things. 147 147 00:07:43,490 --> 00:07:45,750 For example, let's say that the owner 148 148 00:07:45,750 --> 00:07:49,010 of the restaurant now decided to switch the main 149 149 00:07:49,010 --> 00:07:51,240 and the secondary category. 150 150 00:07:51,240 --> 00:07:54,530 So right now the primary is Italian 151 151 00:07:54,530 --> 00:07:56,510 and the secondary is vegetarian 152 152 00:07:56,510 --> 00:07:58,323 but now they wanted to switch it. 153 153 00:07:59,420 --> 00:08:04,420 So let's first change the name here 154 154 00:08:04,420 --> 00:08:09,420 to main and secondary, just to make it a bit more obvious. 155 155 00:08:10,970 --> 00:08:13,030 secondary. 156 156 00:08:13,030 --> 00:08:16,500 And so if we were to like to switch these two variables, 157 157 00:08:16,500 --> 00:08:19,000 then without destructuring, 158 158 00:08:19,000 --> 00:08:21,133 we would have to do it like this. 159 159 00:08:22,160 --> 00:08:24,833 We would need to create a temporary variable, 160 160 00:08:25,960 --> 00:08:29,580 and then so that we would assign one of them, 161 161 00:08:29,580 --> 00:08:31,070 so let's say main, 162 162 00:08:31,070 --> 00:08:33,600 and then we could switch to main. 163 163 00:08:33,600 --> 00:08:37,000 We would say main is equal to the secondary 164 164 00:08:38,350 --> 00:08:43,350 and then secondary is equal to temp 165 165 00:08:43,810 --> 00:08:46,890 because that's where we temporarily stored 166 166 00:08:46,890 --> 00:08:49,120 the value of main, right? 167 167 00:08:49,120 --> 00:08:51,600 We could not just do main equal secondary 168 168 00:08:51,600 --> 00:08:53,950 and then secondary equals main 169 169 00:08:53,950 --> 00:08:56,840 because by then we would already have overwritten 170 170 00:08:56,840 --> 00:08:58,880 the main variable, right? 171 171 00:08:58,880 --> 00:09:01,560 And that's why we need this temporary variable 172 172 00:09:01,560 --> 00:09:02,523 in the middle. 173 173 00:09:03,650 --> 00:09:05,440 So that's how we would do it, 174 174 00:09:05,440 --> 00:09:08,830 but with destructuring we can make it a lot easier. 175 175 00:09:08,830 --> 00:09:10,470 And this is how we do it. 176 176 00:09:10,470 --> 00:09:13,610 First, we create an array with both of them 177 177 00:09:13,610 --> 00:09:15,770 and the first one is gonna be the secondary 178 178 00:09:17,200 --> 00:09:20,243 and then the second one will be to main. 179 179 00:09:21,410 --> 00:09:22,780 And actually, before we do that 180 180 00:09:22,780 --> 00:09:24,873 let me just show you that this worked. 181 181 00:09:26,840 --> 00:09:30,730 So main and secondary 182 182 00:09:30,730 --> 00:09:32,680 and so now we should see them switched. 183 183 00:09:34,460 --> 00:09:35,730 Oh okay. 184 184 00:09:35,730 --> 00:09:38,163 Here, we need to change of course, to let, 185 185 00:09:40,100 --> 00:09:44,393 because we are reassigning here to a const in line 24. 186 186 00:09:45,780 --> 00:09:47,320 So let's try that now. 187 187 00:09:47,320 --> 00:09:51,070 And indeed, what was Italian is now vegetarian 188 188 00:09:51,070 --> 00:09:53,743 and what was vegetarian is now Italian. 189 189 00:09:54,670 --> 00:09:59,250 So this year worked indeed, but let's now take this out 190 190 00:09:59,250 --> 00:10:02,560 so that we can do it using destructuring. 191 191 00:10:02,560 --> 00:10:05,690 So as I was saying, in order to switch to two variables 192 192 00:10:05,690 --> 00:10:08,460 using destructuring, we would first start 193 193 00:10:08,460 --> 00:10:13,340 by creating a new array with the two variables inverted. 194 194 00:10:13,340 --> 00:10:16,060 So first secondary and then main, 195 195 00:10:16,060 --> 00:10:18,253 and then we can simply distract them. 196 196 00:10:19,270 --> 00:10:24,270 So main and secondary equals the destructuring 197 197 00:10:26,440 --> 00:10:28,070 of this array. 198 198 00:10:28,070 --> 00:10:30,710 And now we're not using let or const here 199 199 00:10:30,710 --> 00:10:33,470 because we are simply reassigning the values 200 200 00:10:33,470 --> 00:10:35,280 of the two variables. 201 201 00:10:35,280 --> 00:10:37,170 So just like we did here, 202 202 00:10:37,170 --> 00:10:41,773 but now we do not need a temporary variable in the middle. 203 203 00:10:44,860 --> 00:10:46,870 So let's check now. 204 204 00:10:46,870 --> 00:10:51,400 And indeed the result is the same, but this is a lot easier. 205 205 00:10:51,400 --> 00:10:55,660 And this is a trick here that I actually use all the time. 206 206 00:10:55,660 --> 00:10:57,470 So let me just show here 207 207 00:10:57,470 --> 00:11:02,037 or actually write here, switching variables. 208 208 00:11:05,930 --> 00:11:07,060 Okay. 209 209 00:11:07,060 --> 00:11:09,020 So that's a pretty cool trick. 210 210 00:11:09,020 --> 00:11:11,420 And another trick with destructuring 211 211 00:11:11,420 --> 00:11:14,660 is that we can have a function, return an array 212 212 00:11:14,660 --> 00:11:17,760 and then we can immediately destruct the result 213 213 00:11:17,760 --> 00:11:19,540 into different variables. 214 214 00:11:19,540 --> 00:11:23,070 And so this basically allows us to return multiple values 215 215 00:11:23,070 --> 00:11:24,403 from a function. 216 216 00:11:25,471 --> 00:11:28,603 And so let's try that and write a function to order food. 217 217 00:11:29,690 --> 00:11:31,891 So here in our restaurant 218 218 00:11:31,891 --> 00:11:33,730 let's now add a method 219 219 00:11:35,300 --> 00:11:36,793 and I'm gonna call it order. 220 220 00:11:38,040 --> 00:11:39,570 So this will be a function 221 221 00:11:39,570 --> 00:11:41,600 and it will accept two parameters. 222 222 00:11:41,600 --> 00:11:44,003 one index for the starter menu. 223 223 00:11:44,880 --> 00:11:48,263 So this menu and then one index for the main menu. 224 224 00:11:49,280 --> 00:11:51,980 And then the person will order basically 225 225 00:11:51,980 --> 00:11:55,330 by giving the index for eat of the menus. 226 226 00:11:55,330 --> 00:11:59,290 So something very simple just to illustrate the point here. 227 227 00:11:59,290 --> 00:12:04,290 So let's say starter index and main index. 228 228 00:12:08,870 --> 00:12:11,230 Okay and so we will simply now return 229 229 00:12:11,230 --> 00:12:15,273 the content of the arrays based on the given indexes. 230 230 00:12:16,550 --> 00:12:19,600 So return and so, as I said, 231 231 00:12:19,600 --> 00:12:22,780 we're gonna return an array and then we go to 232 232 00:12:22,780 --> 00:12:27,780 this.startermenu okay. 233 233 00:12:28,090 --> 00:12:31,610 And remember how the this keyword here is set 234 234 00:12:31,610 --> 00:12:33,820 as we learned in the last section. 235 235 00:12:33,820 --> 00:12:38,300 And so now we go to the position of the starter index 236 236 00:12:38,300 --> 00:12:40,700 that we pass into the function. 237 237 00:12:40,700 --> 00:12:42,233 Okay that makes sense? 238 238 00:12:43,580 --> 00:12:46,610 Then the same with the main menu 239 239 00:12:48,020 --> 00:12:52,293 at the position of the main index that has passed in. 240 240 00:12:53,770 --> 00:12:54,850 Alright. 241 241 00:12:54,850 --> 00:12:58,640 So here we are, of course not doing any destructuring yet 242 242 00:12:58,640 --> 00:13:02,150 but now is the time where we will do it. 243 243 00:13:02,150 --> 00:13:07,150 So let's call order or in fact restaurant.order 244 244 00:13:09,870 --> 00:13:13,123 and let's use two and zero. 245 245 00:13:13,970 --> 00:13:18,593 So we want element number two from the starter menu. 246 246 00:13:19,540 --> 00:13:23,400 So the garlic bread and the number zero from the main menu, 247 247 00:13:23,400 --> 00:13:25,350 which is pizza. 248 248 00:13:25,350 --> 00:13:30,350 So we're gonna receive an array with that, right? 249 249 00:13:30,650 --> 00:13:32,100 Let me just show that to you. 250 250 00:13:35,350 --> 00:13:38,420 And indeed it is garlic bread and pizza. 251 251 00:13:38,420 --> 00:13:41,323 And so now we can simply distracter that. 252 252 00:13:45,230 --> 00:13:48,244 So this is the destructuring assignment. 253 253 00:13:48,244 --> 00:13:52,780 And so let's say starter and main 254 254 00:13:52,780 --> 00:13:54,563 should equal these two results. 255 255 00:13:56,450 --> 00:14:00,693 So that's logged them starter and main. 256 256 00:14:04,550 --> 00:14:08,800 Oh, and now this was already defined before. 257 257 00:14:08,800 --> 00:14:11,743 So let's just call this one here, the main course. 258 258 00:14:16,060 --> 00:14:19,883 And now indeed, we get the garlic bread and pizza. 259 259 00:14:22,410 --> 00:14:25,340 Alright, so this is how we basically receive 260 260 00:14:26,320 --> 00:14:30,833 two return values from a function. 261 261 00:14:33,150 --> 00:14:34,890 Alright, so of course 262 262 00:14:34,890 --> 00:14:38,020 we could have done that without destructuring 263 263 00:14:38,020 --> 00:14:40,690 and still return an array from the function, 264 264 00:14:40,690 --> 00:14:42,660 but this is a very handy way 265 265 00:14:42,660 --> 00:14:45,350 of then immediately creating two variables 266 266 00:14:45,350 --> 00:14:47,560 out of one function call. 267 267 00:14:47,560 --> 00:14:48,770 Okay. 268 268 00:14:48,770 --> 00:14:52,060 And now that you understand how destructuring works 269 269 00:14:52,060 --> 00:14:54,220 let's take it one step further 270 270 00:14:54,220 --> 00:14:57,883 because what happens if we have a nested array? 271 271 00:14:59,040 --> 00:15:00,900 So let's say nested 272 272 00:15:03,630 --> 00:15:07,713 and with nested, we mean one array inside another. 273 273 00:15:08,780 --> 00:15:09,900 So let's say 274 274 00:15:09,900 --> 00:15:13,403 that we know here have another array, five and six. 275 275 00:15:14,960 --> 00:15:17,450 So an array inside an array. 276 276 00:15:17,450 --> 00:15:19,710 And I'm not sure if we did that before, 277 277 00:15:19,710 --> 00:15:22,940 but of course that's perfectly acceptable. 278 278 00:15:22,940 --> 00:15:25,300 So as a small exercise 279 279 00:15:25,300 --> 00:15:30,203 how can we get this value here and this entire array? 280 280 00:15:31,980 --> 00:15:34,870 Well, we simply define two new variables 281 281 00:15:34,870 --> 00:15:37,217 using the destructuring assignment 282 282 00:15:37,217 --> 00:15:40,620 and let's call them I and J 283 283 00:15:40,620 --> 00:15:43,650 and remember that we do not want in the middle, 284 284 00:15:43,650 --> 00:15:45,083 so we just skip it. 285 285 00:15:46,050 --> 00:15:49,220 So simply leave a space and then another comma 286 286 00:15:49,220 --> 00:15:51,240 and then this one is gonna be J 287 287 00:15:52,500 --> 00:15:56,003 equals two the array from which they should be taken. 288 288 00:16:01,140 --> 00:16:04,330 And indeed we get the number two 289 289 00:16:04,330 --> 00:16:07,370 and then the array five and six. 290 290 00:16:07,370 --> 00:16:10,200 Great, but what if we actually wanted 291 291 00:16:10,200 --> 00:16:12,320 all the individual values? 292 292 00:16:12,320 --> 00:16:14,540 Well then we would essentially 293 293 00:16:14,540 --> 00:16:18,890 have to do destructuring inside of destructuring. 294 294 00:16:18,890 --> 00:16:23,000 So that sounds complicated, but it's not. 295 295 00:16:23,000 --> 00:16:24,920 So let's take out these here 296 296 00:16:25,870 --> 00:16:29,180 and let's create now three variables. 297 297 00:16:29,180 --> 00:16:34,180 So one for this one for the five and one for the six. 298 298 00:16:34,330 --> 00:16:36,780 So we're gonna skip the four again. 299 299 00:16:36,780 --> 00:16:41,400 So that's gonna be I then again the whole here 300 300 00:16:41,400 --> 00:16:43,600 and now here we can destruct 301 301 00:16:43,600 --> 00:16:46,060 this inner array immediately. 302 302 00:16:46,060 --> 00:16:49,340 So we used the restructuring here again 303 303 00:16:49,340 --> 00:16:54,170 into now J for the first element and K for the second. 304 304 00:16:54,170 --> 00:16:55,503 So four, five, and six. 305 305 00:16:56,950 --> 00:16:57,800 And then again 306 306 00:16:58,980 --> 00:17:03,980 the array from which to take, and then let's take a look. 307 307 00:17:04,690 --> 00:17:08,150 And so this should now give us two five and six 308 308 00:17:08,150 --> 00:17:10,277 as separate variables. 309 309 00:17:10,277 --> 00:17:15,277 And yes so that's how nested destructuring works. 310 310 00:17:16,570 --> 00:17:18,750 Basically we need to do destructuring 311 311 00:17:18,750 --> 00:17:21,770 inside of destructuring. 312 312 00:17:21,770 --> 00:17:22,730 Okay. 313 313 00:17:22,730 --> 00:17:25,950 And now to finish there is just another feature 314 314 00:17:25,950 --> 00:17:28,720 of destructuring that I want to show you. 315 315 00:17:28,720 --> 00:17:31,080 So we can also set default values 316 316 00:17:31,080 --> 00:17:34,130 for the variables when we are extracting them. 317 317 00:17:34,130 --> 00:17:36,560 And that's gonna be very useful in the case 318 318 00:17:36,560 --> 00:17:38,977 that we don't know the length of the array, 319 319 00:17:38,977 --> 00:17:42,430 and this can sometimes happen in real world applications, 320 320 00:17:42,430 --> 00:17:44,100 as you will see later. 321 321 00:17:44,100 --> 00:17:47,510 So if we have an array that is shorter than we might think, 322 322 00:17:47,510 --> 00:17:50,260 then we might try to unpack the array 323 323 00:17:50,260 --> 00:17:53,310 in positions that don't even exist. 324 324 00:17:53,310 --> 00:17:57,490 So let me say here just default values 325 325 00:17:57,490 --> 00:18:01,400 and here nested destructuring. 326 326 00:18:03,810 --> 00:18:06,513 So learning a lot of stuff here about destructuring. 327 327 00:18:07,700 --> 00:18:10,930 And so let's now say that we have this array 328 328 00:18:10,930 --> 00:18:12,970 eight and nine, 329 329 00:18:12,970 --> 00:18:15,640 and then we are trying to distracture it. 330 330 00:18:15,640 --> 00:18:16,540 So just pretend 331 331 00:18:16,540 --> 00:18:19,453 that we actually don't know the array alright. 332 332 00:18:20,490 --> 00:18:22,310 And so we might try to take 333 333 00:18:22,310 --> 00:18:27,060 three elements out of the array using again destructuring 334 334 00:18:27,060 --> 00:18:31,673 so let's call them P Q and R. 335 335 00:18:33,420 --> 00:18:38,420 And then let's try to lock them all P Q and R. 336 336 00:18:38,470 --> 00:18:42,870 And so now here we get undefined as the third one. 337 337 00:18:42,870 --> 00:18:45,000 So this would basically be the same 338 338 00:18:45,000 --> 00:18:48,610 as trying to read the element at position number two 339 339 00:18:48,610 --> 00:18:49,880 of this array 340 340 00:18:49,880 --> 00:18:53,520 but it only has elements at position zero and one. 341 341 00:18:53,520 --> 00:18:56,040 And so therefore we then get undefined. 342 342 00:18:56,040 --> 00:18:59,240 But as I said, we can set default values. 343 343 00:18:59,240 --> 00:19:02,550 So that's simply set them all to one 344 344 00:19:03,440 --> 00:19:08,013 and then, our R will become one. 345 345 00:19:09,480 --> 00:19:10,313 Great. 346 346 00:19:10,313 --> 00:19:14,913 And if we remove this element, then Q will also become one. 347 347 00:19:16,420 --> 00:19:17,300 Okay. 348 348 00:19:17,300 --> 00:19:20,150 And as I said, this can sometimes be useful. 349 349 00:19:20,150 --> 00:19:23,880 For example, when we get data from an API. 350 350 00:19:23,880 --> 00:19:26,210 And so we're gonna probably use this one 351 351 00:19:26,210 --> 00:19:29,200 and actually everything that we did in his lecture 352 352 00:19:29,200 --> 00:19:30,963 a bit later in the course. 30244