WEBVTT 1 00:00:01.310 --> 00:00:03.150 Let's start this section 2 00:00:03.150 --> 00:00:05.883 by learning about array destructuring. 3 00:00:07.320 --> 00:00:09.690 So, as I said in the intro video, 4 00:00:09.690 --> 00:00:12.840 in this section we're basically gonna continue learning 5 00:00:12.840 --> 00:00:16.740 basic syntax and basic JavaScript features, 6 00:00:16.740 --> 00:00:21.270 but now with a focus on more modern JavaScript. 7 00:00:21.270 --> 00:00:23.200 And the theme of this section 8 00:00:23.200 --> 00:00:26.860 will be to simulate a foot delivery application. 9 00:00:26.860 --> 00:00:29.720 And in specific one Italian restaurant 10 00:00:29.720 --> 00:00:31.950 which is this starter data here 11 00:00:31.950 --> 00:00:34.860 that we already have in the starter files. 12 00:00:34.860 --> 00:00:38.190 And so this one is called Classico Italiano. 13 00:00:38.190 --> 00:00:41.400 So I already opened up the starter files here 14 00:00:41.400 --> 00:00:42.740 for this project. 15 00:00:42.740 --> 00:00:44.050 Okay. 16 00:00:44.050 --> 00:00:45.890 Now learning complex topics 17 00:00:45.890 --> 00:00:49.710 like the ones we're gonna dive into in the section 18 00:00:49.710 --> 00:00:52.860 is really best done in isolation. 19 00:00:52.860 --> 00:00:55.070 This way you can understand exactly 20 00:00:55.070 --> 00:00:56.880 what I'm trying to teach you 21 00:00:56.880 --> 00:00:58.590 without having to think about 22 00:00:58.590 --> 00:01:01.530 five other things at the same time. 23 00:01:01.530 --> 00:01:04.950 And so I'm isolating just this one restaurant 24 00:01:04.950 --> 00:01:07.610 and building no user interface 25 00:01:07.610 --> 00:01:11.870 so that we can focus just on the JavaScript language here. 26 00:01:11.870 --> 00:01:15.390 And some people will say that this is boring 27 00:01:15.390 --> 00:01:19.320 but believe me, I do have enough teaching experience 28 00:01:19.320 --> 00:01:23.490 to know that some topics are best learned in isolation. 29 00:01:23.490 --> 00:01:25.720 And for me, the most important thing 30 00:01:25.720 --> 00:01:28.960 is that you will actually learn in this course. 31 00:01:28.960 --> 00:01:29.833 Now of course, 32 00:01:30.721 --> 00:01:32.530 there are also topics that can be applied 33 00:01:32.530 --> 00:01:34.740 to a visual project. 34 00:01:34.740 --> 00:01:36.730 And that's why in the next section, 35 00:01:36.730 --> 00:01:39.250 we have a really, really cool project 36 00:01:39.250 --> 00:01:41.410 with an amazing user interface 37 00:01:41.410 --> 00:01:44.560 where we're gonna learn about array methods, 38 00:01:44.560 --> 00:01:48.540 but for now let's focus on built in data structures 39 00:01:48.540 --> 00:01:51.230 and modern advanced operators. 40 00:01:51.230 --> 00:01:54.283 And again, starting with array destructuring. 41 00:01:55.220 --> 00:01:58.320 So destructuring is an ESX feature 42 00:01:58.320 --> 00:02:01.450 and it's basically a way of unpacking values 43 00:02:01.450 --> 00:02:05.900 from an array or an object into separate variables. 44 00:02:05.900 --> 00:02:07.910 So in other words destructuring 45 00:02:07.910 --> 00:02:11.230 is to break a complex data structure down 46 00:02:11.230 --> 00:02:14.970 into a smaller data structure like a variable. 47 00:02:14.970 --> 00:02:17.630 So for arrays we use destructuring 48 00:02:17.630 --> 00:02:19.880 to retrieve elements from the array 49 00:02:19.880 --> 00:02:23.223 and store them into variables in a very easy way. 50 00:02:24.230 --> 00:02:27.563 So let's just actually start with a very simple array. 51 00:02:29.170 --> 00:02:31.590 And now if we wanted to retrieve each one 52 00:02:31.590 --> 00:02:35.200 into its own variable without destructuring, 53 00:02:35.200 --> 00:02:36.773 we would do it like this. 54 00:02:37.930 --> 00:02:40.650 Let's say we wanted to name them A B C. 55 00:02:40.650 --> 00:02:44.250 And so we would write the name of the array, 56 00:02:44.250 --> 00:02:46.463 which I totally forgot appear. 57 00:02:47.680 --> 00:02:50.980 So our zero and then just duplicating this line 58 00:02:51.890 --> 00:02:56.070 which I'm using command or option L four. 59 00:02:56.070 --> 00:03:00.110 And I'm not sure if that is actually a shortcut in VS code. 60 00:03:00.110 --> 00:03:02.120 Let me see here. 61 00:03:02.120 --> 00:03:07.120 And apparently it's not, let's see here duplicate selection. 62 00:03:08.260 --> 00:03:10.350 So it's this duplicate selection here 63 00:03:10.350 --> 00:03:12.940 and you can set up a shortcut for that. 64 00:03:12.940 --> 00:03:14.340 And so I will just do that. 65 00:03:17.240 --> 00:03:21.200 So B and so that would be element number one 66 00:03:21.200 --> 00:03:24.860 and number two would be C. 67 00:03:24.860 --> 00:03:28.400 So that's how we would retrieve these three elements. 68 00:03:28.400 --> 00:03:30.350 But now with destructuring 69 00:03:30.350 --> 00:03:33.170 we can actually declare all the three variables 70 00:03:33.170 --> 00:03:34.870 at the same time. 71 00:03:34.870 --> 00:03:38.810 So let me show you how so const 72 00:03:38.810 --> 00:03:41.310 and then we use the square brackets. 73 00:03:41.310 --> 00:03:44.860 And so that's because we are, destructuring an array. 74 00:03:44.860 --> 00:03:48.490 And so now we can declare three variables at the same time. 75 00:03:48.490 --> 00:03:51.140 And now I'm not using A B and C 76 00:03:51.140 --> 00:03:52.860 because we already used them. 77 00:03:52.860 --> 00:03:56.203 So let's go with X Y, and Z, 78 00:03:57.150 --> 00:04:02.040 and then I will simply set that equal to the array. 79 00:04:02.040 --> 00:04:02.873 And that's it. 80 00:04:03.790 --> 00:04:06.600 No, let's actually see them now in the console 81 00:04:09.070 --> 00:04:12.120 give it a save, and then we need to start our live server 82 00:04:13.977 --> 00:04:14.977 with a new terminal. 83 00:04:16.440 --> 00:04:18.840 And actually I can hit the tab key now 84 00:04:18.840 --> 00:04:20.460 and it will then automatically write 85 00:04:20.460 --> 00:04:21.883 the rest of the command, 86 00:04:26.230 --> 00:04:27.633 then close that down. 87 00:04:31.740 --> 00:04:32.580 And as you can see 88 00:04:32.580 --> 00:04:36.030 here we get to two results, two, three, and four. 89 00:04:36.030 --> 00:04:38.220 So the elements of the array. 90 00:04:38.220 --> 00:04:41.110 So basically we write this syntax here 91 00:04:41.110 --> 00:04:44.070 and then this will become the first element of the array, 92 00:04:44.070 --> 00:04:46.540 this the second and this the third. 93 00:04:46.540 --> 00:04:51.000 And so this here is destructuring this array here 94 00:04:51.000 --> 00:04:52.760 from the right side. 95 00:04:52.760 --> 00:04:53.593 Okay. 96 00:04:53.593 --> 00:04:57.150 And of course this looks like an array, but it's really not. 97 00:04:57.150 --> 00:05:00.140 It's just the destructuring assignment. 98 00:05:00.140 --> 00:05:03.680 So whenever JavaScript sees this here on the left side 99 00:05:03.680 --> 00:05:08.220 of the equal sign, it knows that it should do destructuring. 100 00:05:08.220 --> 00:05:10.520 Now, when you do this just don't forget 101 00:05:10.520 --> 00:05:13.933 to actually also declare the variables using const. 102 00:05:15.250 --> 00:05:16.530 Okay. 103 00:05:16.530 --> 00:05:18.550 And I also wanted to notice that 104 00:05:18.550 --> 00:05:20.760 even though we did destructuring 105 00:05:20.760 --> 00:05:24.500 which sounds kind of distractive right? 106 00:05:24.500 --> 00:05:27.423 The original array is of course not affected. 107 00:05:29.520 --> 00:05:33.140 Okay so we are not destroying here the array 108 00:05:33.140 --> 00:05:38.140 we are only destructuring so we are unpacking it, okay. 109 00:05:38.540 --> 00:05:40.780 And now let's work a little bit with the data 110 00:05:40.780 --> 00:05:42.350 from our restaurant. 111 00:05:42.350 --> 00:05:46.720 So here we see that we have a couple of arrays actually. 112 00:05:46.720 --> 00:05:50.780 So the categories, the starter menu and the main menu. 113 00:05:50.780 --> 00:05:54.283 So let's take some elements out of the categories. 114 00:05:55.670 --> 00:05:56.600 So let's say 115 00:05:58.010 --> 00:06:00.770 and then the destructuring assignment 116 00:06:00.770 --> 00:06:04.660 first and second, alright. 117 00:06:04.660 --> 00:06:06.120 And so now you see here 118 00:06:06.120 --> 00:06:08.760 that we do not have to take all of the elements 119 00:06:08.760 --> 00:06:10.260 out of the array. 120 00:06:10.260 --> 00:06:13.150 So this will just take the first and the second. 121 00:06:13.150 --> 00:06:16.750 So it will simply follow the order of the elements here 122 00:06:16.750 --> 00:06:19.403 and we'll basically only take these two. 123 00:06:21.100 --> 00:06:24.290 And so now the array from which we want to extract 124 00:06:24.290 --> 00:06:27.993 and that's restaurant.categories. 125 00:06:31.280 --> 00:06:32.720 Just to take a look now 126 00:06:34.840 --> 00:06:37.960 and indeed we get Italian and pizzeria 127 00:06:37.960 --> 00:06:41.940 which are exactly the first two elements of the array. 128 00:06:41.940 --> 00:06:43.060 But now let's say 129 00:06:43.060 --> 00:06:46.447 that we only wanted to take the first category. 130 00:06:46.447 --> 00:06:49.550 So this one and a third. 131 00:06:49.550 --> 00:06:52.060 So let's say that this one is the main category 132 00:06:52.060 --> 00:06:55.120 and this is the secondary for some reason. 133 00:06:55.120 --> 00:06:56.360 Well, to do that 134 00:06:56.360 --> 00:06:59.913 we simply leave a hole in the destructuring operator. 135 00:07:00.930 --> 00:07:03.980 So what I mean is just this. 136 00:07:03.980 --> 00:07:07.280 And so now the second element will be skipped 137 00:07:07.280 --> 00:07:08.970 to the one that would go here 138 00:07:08.970 --> 00:07:13.223 and then this second year simply becomes this third element. 139 00:07:15.250 --> 00:07:18.950 And now, so you see it a second now is vegetarian 140 00:07:18.950 --> 00:07:22.080 which is element number three alright. 141 00:07:22.080 --> 00:07:25.700 And so like this, we don't have to create a variables 142 00:07:25.700 --> 00:07:28.640 for all the stuff that we might not even need. 143 00:07:28.640 --> 00:07:31.600 So if we only need to take this and this, 144 00:07:31.600 --> 00:07:34.610 we just skip the element in the middle okay. 145 00:07:37.940 --> 00:07:39.650 And this is really powerful. 146 00:07:39.650 --> 00:07:43.490 And we use destructuring to do a lot of cool things. 147 00:07:43.490 --> 00:07:45.750 For example, let's say that the owner 148 00:07:45.750 --> 00:07:49.010 of the restaurant now decided to switch the main 149 00:07:49.010 --> 00:07:51.240 and the secondary category. 150 00:07:51.240 --> 00:07:54.530 So right now the primary is Italian 151 00:07:54.530 --> 00:07:56.510 and the secondary is vegetarian 152 00:07:56.510 --> 00:07:58.323 but now they wanted to switch it. 153 00:07:59.420 --> 00:08:04.420 So let's first change the name here 154 00:08:04.420 --> 00:08:09.420 to main and secondary, just to make it a bit more obvious. 155 00:08:10.970 --> 00:08:13.030 secondary. 156 00:08:13.030 --> 00:08:16.500 And so if we were to like to switch these two variables, 157 00:08:16.500 --> 00:08:19.000 then without destructuring, 158 00:08:19.000 --> 00:08:21.133 we would have to do it like this. 159 00:08:22.160 --> 00:08:24.833 We would need to create a temporary variable, 160 00:08:25.960 --> 00:08:29.580 and then so that we would assign one of them, 161 00:08:29.580 --> 00:08:31.070 so let's say main, 162 00:08:31.070 --> 00:08:33.600 and then we could switch to main. 163 00:08:33.600 --> 00:08:37.000 We would say main is equal to the secondary 164 00:08:38.350 --> 00:08:43.350 and then secondary is equal to temp 165 00:08:43.810 --> 00:08:46.890 because that's where we temporarily stored 166 00:08:46.890 --> 00:08:49.120 the value of main, right? 167 00:08:49.120 --> 00:08:51.600 We could not just do main equal secondary 168 00:08:51.600 --> 00:08:53.950 and then secondary equals main 169 00:08:53.950 --> 00:08:56.840 because by then we would already have overwritten 170 00:08:56.840 --> 00:08:58.880 the main variable, right? 171 00:08:58.880 --> 00:09:01.560 And that's why we need this temporary variable 172 00:09:01.560 --> 00:09:02.523 in the middle. 173 00:09:03.650 --> 00:09:05.440 So that's how we would do it, 174 00:09:05.440 --> 00:09:08.830 but with destructuring we can make it a lot easier. 175 00:09:08.830 --> 00:09:10.470 And this is how we do it. 176 00:09:10.470 --> 00:09:13.610 First, we create an array with both of them 177 00:09:13.610 --> 00:09:15.770 and the first one is gonna be the secondary 178 00:09:17.200 --> 00:09:20.243 and then the second one will be to main. 179 00:09:21.410 --> 00:09:22.780 And actually, before we do that 180 00:09:22.780 --> 00:09:24.873 let me just show you that this worked. 181 00:09:26.840 --> 00:09:30.730 So main and secondary 182 00:09:30.730 --> 00:09:32.680 and so now we should see them switched. 183 00:09:34.460 --> 00:09:35.730 Oh okay. 184 00:09:35.730 --> 00:09:38.163 Here, we need to change of course, to let, 185 00:09:40.100 --> 00:09:44.393 because we are reassigning here to a const in line 24. 186 00:09:45.780 --> 00:09:47.320 So let's try that now. 187 00:09:47.320 --> 00:09:51.070 And indeed, what was Italian is now vegetarian 188 00:09:51.070 --> 00:09:53.743 and what was vegetarian is now Italian. 189 00:09:54.670 --> 00:09:59.250 So this year worked indeed, but let's now take this out 190 00:09:59.250 --> 00:10:02.560 so that we can do it using destructuring. 191 00:10:02.560 --> 00:10:05.690 So as I was saying, in order to switch to two variables 192 00:10:05.690 --> 00:10:08.460 using destructuring, we would first start 193 00:10:08.460 --> 00:10:13.340 by creating a new array with the two variables inverted. 194 00:10:13.340 --> 00:10:16.060 So first secondary and then main, 195 00:10:16.060 --> 00:10:18.253 and then we can simply distract them. 196 00:10:19.270 --> 00:10:24.270 So main and secondary equals the destructuring 197 00:10:26.440 --> 00:10:28.070 of this array. 198 00:10:28.070 --> 00:10:30.710 And now we're not using let or const here 199 00:10:30.710 --> 00:10:33.470 because we are simply reassigning the values 200 00:10:33.470 --> 00:10:35.280 of the two variables. 201 00:10:35.280 --> 00:10:37.170 So just like we did here, 202 00:10:37.170 --> 00:10:41.773 but now we do not need a temporary variable in the middle. 203 00:10:44.860 --> 00:10:46.870 So let's check now. 204 00:10:46.870 --> 00:10:51.400 And indeed the result is the same, but this is a lot easier. 205 00:10:51.400 --> 00:10:55.660 And this is a trick here that I actually use all the time. 206 00:10:55.660 --> 00:10:57.470 So let me just show here 207 00:10:57.470 --> 00:11:02.037 or actually write here, switching variables. 208 00:11:05.930 --> 00:11:07.060 Okay. 209 00:11:07.060 --> 00:11:09.020 So that's a pretty cool trick. 210 00:11:09.020 --> 00:11:11.420 And another trick with destructuring 211 00:11:11.420 --> 00:11:14.660 is that we can have a function, return an array 212 00:11:14.660 --> 00:11:17.760 and then we can immediately destruct the result 213 00:11:17.760 --> 00:11:19.540 into different variables. 214 00:11:19.540 --> 00:11:23.070 And so this basically allows us to return multiple values 215 00:11:23.070 --> 00:11:24.403 from a function. 216 00:11:25.471 --> 00:11:28.603 And so let's try that and write a function to order food. 217 00:11:29.690 --> 00:11:31.891 So here in our restaurant 218 00:11:31.891 --> 00:11:33.730 let's now add a method 219 00:11:35.300 --> 00:11:36.793 and I'm gonna call it order. 220 00:11:38.040 --> 00:11:39.570 So this will be a function 221 00:11:39.570 --> 00:11:41.600 and it will accept two parameters. 222 00:11:41.600 --> 00:11:44.003 one index for the starter menu. 223 00:11:44.880 --> 00:11:48.263 So this menu and then one index for the main menu. 224 00:11:49.280 --> 00:11:51.980 And then the person will order basically 225 00:11:51.980 --> 00:11:55.330 by giving the index for eat of the menus. 226 00:11:55.330 --> 00:11:59.290 So something very simple just to illustrate the point here. 227 00:11:59.290 --> 00:12:04.290 So let's say starter index and main index. 228 00:12:08.870 --> 00:12:11.230 Okay and so we will simply now return 229 00:12:11.230 --> 00:12:15.273 the content of the arrays based on the given indexes. 230 00:12:16.550 --> 00:12:19.600 So return and so, as I said, 231 00:12:19.600 --> 00:12:22.780 we're gonna return an array and then we go to 232 00:12:22.780 --> 00:12:27.780 this.startermenu okay. 233 00:12:28.090 --> 00:12:31.610 And remember how the this keyword here is set 234 00:12:31.610 --> 00:12:33.820 as we learned in the last section. 235 00:12:33.820 --> 00:12:38.300 And so now we go to the position of the starter index 236 00:12:38.300 --> 00:12:40.700 that we pass into the function. 237 00:12:40.700 --> 00:12:42.233 Okay that makes sense? 238 00:12:43.580 --> 00:12:46.610 Then the same with the main menu 239 00:12:48.020 --> 00:12:52.293 at the position of the main index that has passed in. 240 00:12:53.770 --> 00:12:54.850 Alright. 241 00:12:54.850 --> 00:12:58.640 So here we are, of course not doing any destructuring yet 242 00:12:58.640 --> 00:13:02.150 but now is the time where we will do it. 243 00:13:02.150 --> 00:13:07.150 So let's call order or in fact restaurant.order 244 00:13:09.870 --> 00:13:13.123 and let's use two and zero. 245 00:13:13.970 --> 00:13:18.593 So we want element number two from the starter menu. 246 00:13:19.540 --> 00:13:23.400 So the garlic bread and the number zero from the main menu, 247 00:13:23.400 --> 00:13:25.350 which is pizza. 248 00:13:25.350 --> 00:13:30.350 So we're gonna receive an array with that, right? 249 00:13:30.650 --> 00:13:32.100 Let me just show that to you. 250 00:13:35.350 --> 00:13:38.420 And indeed it is garlic bread and pizza. 251 00:13:38.420 --> 00:13:41.323 And so now we can simply distracter that. 252 00:13:45.230 --> 00:13:48.244 So this is the destructuring assignment. 253 00:13:48.244 --> 00:13:52.780 And so let's say starter and main 254 00:13:52.780 --> 00:13:54.563 should equal these two results. 255 00:13:56.450 --> 00:14:00.693 So that's logged them starter and main. 256 00:14:04.550 --> 00:14:08.800 Oh, and now this was already defined before. 257 00:14:08.800 --> 00:14:11.743 So let's just call this one here, the main course. 258 00:14:16.060 --> 00:14:19.883 And now indeed, we get the garlic bread and pizza. 259 00:14:22.410 --> 00:14:25.340 Alright, so this is how we basically receive 260 00:14:26.320 --> 00:14:30.833 two return values from a function. 261 00:14:33.150 --> 00:14:34.890 Alright, so of course 262 00:14:34.890 --> 00:14:38.020 we could have done that without destructuring 263 00:14:38.020 --> 00:14:40.690 and still return an array from the function, 264 00:14:40.690 --> 00:14:42.660 but this is a very handy way 265 00:14:42.660 --> 00:14:45.350 of then immediately creating two variables 266 00:14:45.350 --> 00:14:47.560 out of one function call. 267 00:14:47.560 --> 00:14:48.770 Okay. 268 00:14:48.770 --> 00:14:52.060 And now that you understand how destructuring works 269 00:14:52.060 --> 00:14:54.220 let's take it one step further 270 00:14:54.220 --> 00:14:57.883 because what happens if we have a nested array? 271 00:14:59.040 --> 00:15:00.900 So let's say nested 272 00:15:03.630 --> 00:15:07.713 and with nested, we mean one array inside another. 273 00:15:08.780 --> 00:15:09.900 So let's say 274 00:15:09.900 --> 00:15:13.403 that we know here have another array, five and six. 275 00:15:14.960 --> 00:15:17.450 So an array inside an array. 276 00:15:17.450 --> 00:15:19.710 And I'm not sure if we did that before, 277 00:15:19.710 --> 00:15:22.940 but of course that's perfectly acceptable. 278 00:15:22.940 --> 00:15:25.300 So as a small exercise 279 00:15:25.300 --> 00:15:30.203 how can we get this value here and this entire array? 280 00:15:31.980 --> 00:15:34.870 Well, we simply define two new variables 281 00:15:34.870 --> 00:15:37.217 using the destructuring assignment 282 00:15:37.217 --> 00:15:40.620 and let's call them I and J 283 00:15:40.620 --> 00:15:43.650 and remember that we do not want in the middle, 284 00:15:43.650 --> 00:15:45.083 so we just skip it. 285 00:15:46.050 --> 00:15:49.220 So simply leave a space and then another comma 286 00:15:49.220 --> 00:15:51.240 and then this one is gonna be J 287 00:15:52.500 --> 00:15:56.003 equals two the array from which they should be taken. 288 00:16:01.140 --> 00:16:04.330 And indeed we get the number two 289 00:16:04.330 --> 00:16:07.370 and then the array five and six. 290 00:16:07.370 --> 00:16:10.200 Great, but what if we actually wanted 291 00:16:10.200 --> 00:16:12.320 all the individual values? 292 00:16:12.320 --> 00:16:14.540 Well then we would essentially 293 00:16:14.540 --> 00:16:18.890 have to do destructuring inside of destructuring. 294 00:16:18.890 --> 00:16:23.000 So that sounds complicated, but it's not. 295 00:16:23.000 --> 00:16:24.920 So let's take out these here 296 00:16:25.870 --> 00:16:29.180 and let's create now three variables. 297 00:16:29.180 --> 00:16:34.180 So one for this one for the five and one for the six. 298 00:16:34.330 --> 00:16:36.780 So we're gonna skip the four again. 299 00:16:36.780 --> 00:16:41.400 So that's gonna be I then again the whole here 300 00:16:41.400 --> 00:16:43.600 and now here we can destruct 301 00:16:43.600 --> 00:16:46.060 this inner array immediately. 302 00:16:46.060 --> 00:16:49.340 So we used the restructuring here again 303 00:16:49.340 --> 00:16:54.170 into now J for the first element and K for the second. 304 00:16:54.170 --> 00:16:55.503 So four, five, and six. 305 00:16:56.950 --> 00:16:57.800 And then again 306 00:16:58.980 --> 00:17:03.980 the array from which to take, and then let's take a look. 307 00:17:04.690 --> 00:17:08.150 And so this should now give us two five and six 308 00:17:08.150 --> 00:17:10.277 as separate variables. 309 00:17:10.277 --> 00:17:15.277 And yes so that's how nested destructuring works. 310 00:17:16.570 --> 00:17:18.750 Basically we need to do destructuring 311 00:17:18.750 --> 00:17:21.770 inside of destructuring. 312 00:17:21.770 --> 00:17:22.730 Okay. 313 00:17:22.730 --> 00:17:25.950 And now to finish there is just another feature 314 00:17:25.950 --> 00:17:28.720 of destructuring that I want to show you. 315 00:17:28.720 --> 00:17:31.080 So we can also set default values 316 00:17:31.080 --> 00:17:34.130 for the variables when we are extracting them. 317 00:17:34.130 --> 00:17:36.560 And that's gonna be very useful in the case 318 00:17:36.560 --> 00:17:38.977 that we don't know the length of the array, 319 00:17:38.977 --> 00:17:42.430 and this can sometimes happen in real world applications, 320 00:17:42.430 --> 00:17:44.100 as you will see later. 321 00:17:44.100 --> 00:17:47.510 So if we have an array that is shorter than we might think, 322 00:17:47.510 --> 00:17:50.260 then we might try to unpack the array 323 00:17:50.260 --> 00:17:53.310 in positions that don't even exist. 324 00:17:53.310 --> 00:17:57.490 So let me say here just default values 325 00:17:57.490 --> 00:18:01.400 and here nested destructuring. 326 00:18:03.810 --> 00:18:06.513 So learning a lot of stuff here about destructuring. 327 00:18:07.700 --> 00:18:10.930 And so let's now say that we have this array 328 00:18:10.930 --> 00:18:12.970 eight and nine, 329 00:18:12.970 --> 00:18:15.640 and then we are trying to distracture it. 330 00:18:15.640 --> 00:18:16.540 So just pretend 331 00:18:16.540 --> 00:18:19.453 that we actually don't know the array alright. 332 00:18:20.490 --> 00:18:22.310 And so we might try to take 333 00:18:22.310 --> 00:18:27.060 three elements out of the array using again destructuring 334 00:18:27.060 --> 00:18:31.673 so let's call them P Q and R. 335 00:18:33.420 --> 00:18:38.420 And then let's try to lock them all P Q and R. 336 00:18:38.470 --> 00:18:42.870 And so now here we get undefined as the third one. 337 00:18:42.870 --> 00:18:45.000 So this would basically be the same 338 00:18:45.000 --> 00:18:48.610 as trying to read the element at position number two 339 00:18:48.610 --> 00:18:49.880 of this array 340 00:18:49.880 --> 00:18:53.520 but it only has elements at position zero and one. 341 00:18:53.520 --> 00:18:56.040 And so therefore we then get undefined. 342 00:18:56.040 --> 00:18:59.240 But as I said, we can set default values. 343 00:18:59.240 --> 00:19:02.550 So that's simply set them all to one 344 00:19:03.440 --> 00:19:08.013 and then, our R will become one. 345 00:19:09.480 --> 00:19:10.313 Great. 346 00:19:10.313 --> 00:19:14.913 And if we remove this element, then Q will also become one. 347 00:19:16.420 --> 00:19:17.300 Okay. 348 00:19:17.300 --> 00:19:20.150 And as I said, this can sometimes be useful. 349 00:19:20.150 --> 00:19:23.880 For example, when we get data from an API. 350 00:19:23.880 --> 00:19:26.210 And so we're gonna probably use this one 351 00:19:26.210 --> 00:19:29.200 and actually everything that we did in his lecture 352 00:19:29.200 --> 00:19:30.963 a bit later in the course.