WEBVTT 1 00:00:01.190 --> 00:00:04.150 So we talked about these destructuring arrays, 2 00:00:04.150 --> 00:00:07.090 but we can also destructure objects. 3 00:00:07.090 --> 00:00:08.623 So let's do that now. 4 00:00:10.090 --> 00:00:13.030 And this time let's actually write the code 5 00:00:13.030 --> 00:00:15.380 before the previous lecture. 6 00:00:15.380 --> 00:00:18.050 So write here after this restaurant object, 7 00:00:18.050 --> 00:00:20.920 so that we don't have to scroll too much. 8 00:00:20.920 --> 00:00:25.420 Also, I added this object here to the restaurant object. 9 00:00:25.420 --> 00:00:28.670 And so that was already in your starter files, 10 00:00:28.670 --> 00:00:31.000 but I didn't have it here yet. 11 00:00:31.000 --> 00:00:34.990 Anyway, let's now talk about object destructuring. 12 00:00:34.990 --> 00:00:36.050 And so to do that, 13 00:00:36.050 --> 00:00:39.850 we use the curly braces to destructure. 14 00:00:39.850 --> 00:00:43.600 So to destructure objects we use the curly braces. 15 00:00:43.600 --> 00:00:48.340 Because this is also how we create objects, right? 16 00:00:48.340 --> 00:00:52.030 Then all we have to do is to provide the variable names 17 00:00:52.030 --> 00:00:54.530 that exactly match the property names 18 00:00:54.530 --> 00:00:57.400 that we want to retrieve from the object. 19 00:00:57.400 --> 00:01:01.210 So the obvious choice here of object to destructure, 20 00:01:01.210 --> 00:01:02.950 is restaurant. 21 00:01:02.950 --> 00:01:07.293 So let's take the name, categories and opening hours. 22 00:01:08.810 --> 00:01:10.990 So again let's start with const 23 00:01:10.990 --> 00:01:14.250 in order to actually define some variable names. 24 00:01:14.250 --> 00:01:15.340 And now as I said, 25 00:01:15.340 --> 00:01:18.640 we need to write the exact property names here 26 00:01:18.640 --> 00:01:22.660 to now extract variables from this object. 27 00:01:22.660 --> 00:01:24.370 Now, since in an object, 28 00:01:24.370 --> 00:01:26.820 the order of elements does not matter, 29 00:01:26.820 --> 00:01:29.390 we don't need to manually skip elements 30 00:01:29.390 --> 00:01:31.300 like we did in an array. 31 00:01:31.300 --> 00:01:33.623 So we can simply write name. 32 00:01:34.470 --> 00:01:36.560 So that's the restaurant name here. 33 00:01:36.560 --> 00:01:39.720 And then also remember that in objects, 34 00:01:39.720 --> 00:01:42.350 the order of the elements does not matter. 35 00:01:42.350 --> 00:01:45.943 And so we can also then take now the opening hours, 36 00:01:48.120 --> 00:01:50.330 which is kind of the last property 37 00:01:50.330 --> 00:01:52.783 and only then the categories. 38 00:01:54.970 --> 00:01:59.000 And then we simply say equal restaurant. 39 00:01:59.000 --> 00:02:01.973 So that's exactly the same as with arrays, 40 00:02:03.250 --> 00:02:05.690 but now here we use the curly braces 41 00:02:05.690 --> 00:02:08.900 and we have to specify the name of the properties. 42 00:02:08.900 --> 00:02:10.940 But just like with arrays, 43 00:02:10.940 --> 00:02:14.350 this now creates three brand new variables. 44 00:02:14.350 --> 00:02:17.053 So based on this restaurant object. 45 00:02:18.130 --> 00:02:23.130 So, let's see name, opening hours and categories. 46 00:02:27.410 --> 00:02:29.423 And indeed here they are. 47 00:02:31.210 --> 00:02:32.710 Okay. 48 00:02:32.710 --> 00:02:35.833 So that's the fundamentals of destructuring objects. 49 00:02:37.250 --> 00:02:38.150 And once again, 50 00:02:38.150 --> 00:02:41.770 this is an extremely useful addition to the language. 51 00:02:41.770 --> 00:02:45.990 Especially when we deal with the result of an API call, 52 00:02:45.990 --> 00:02:48.360 which basically means to get data 53 00:02:48.360 --> 00:02:50.270 from another web application, 54 00:02:50.270 --> 00:02:53.430 like weather data or data about movies 55 00:02:53.430 --> 00:02:55.230 or something like that. 56 00:02:55.230 --> 00:02:56.130 And this data 57 00:02:56.130 --> 00:02:59.980 usually comes in the form of objects basically. 58 00:02:59.980 --> 00:03:03.610 And then destructuring is really a lifesaver. 59 00:03:03.610 --> 00:03:06.820 It allows us to write a lot less code. 60 00:03:06.820 --> 00:03:10.250 So this is really used in modern applications. 61 00:03:10.250 --> 00:03:14.300 But now what if we wanted the variable names to be different 62 00:03:14.300 --> 00:03:16.290 from the property names? 63 00:03:16.290 --> 00:03:19.610 Well, we can do it like this. 64 00:03:19.610 --> 00:03:22.630 Now, of course we still need to reference the property names 65 00:03:22.630 --> 00:03:24.110 like we did before, 66 00:03:24.110 --> 00:03:26.690 otherwise JavaScript has no way of knowing 67 00:03:26.690 --> 00:03:28.690 what we actually want. 68 00:03:28.690 --> 00:03:30.600 So let's write name again, 69 00:03:30.600 --> 00:03:34.720 but then we can use the colon and specify a new name. 70 00:03:34.720 --> 00:03:38.043 Let's say we actually want it to be called restaurantName. 71 00:03:40.238 --> 00:03:41.490 And then here, 72 00:03:41.490 --> 00:03:43.430 let's say we want the openingHours, 73 00:03:43.430 --> 00:03:48.073 but we want the variable to be called just hours. 74 00:03:48.970 --> 00:03:52.820 And then once again, we want to take the categories, 75 00:03:52.820 --> 00:03:56.693 but we want the variable name to be called tags. 76 00:03:58.500 --> 00:04:00.640 And then again, equal to restaurant. 77 00:04:00.640 --> 00:04:02.670 And so the variables that we now created 78 00:04:02.670 --> 00:04:07.663 are called restaurantName, hours and tags. 79 00:04:09.660 --> 00:04:12.620 So basically this, this and this. 80 00:04:12.620 --> 00:04:15.330 And VS code is nice enough to put them 81 00:04:15.330 --> 00:04:17.063 in this purple color here too. 82 00:04:18.250 --> 00:04:19.880 And so you see 83 00:04:19.880 --> 00:04:23.610 that these three are actually the exact same name, 84 00:04:23.610 --> 00:04:26.860 but we were able to give them new variable names. 85 00:04:26.860 --> 00:04:29.670 Which again that's gonna be immensely helpful 86 00:04:29.670 --> 00:04:32.650 when dealing with third-party data. 87 00:04:32.650 --> 00:04:34.200 And another useful feature 88 00:04:35.160 --> 00:04:38.650 for when we are dealing with third-party data like that. 89 00:04:38.650 --> 00:04:41.950 So like an object that we get from somewhere else, 90 00:04:41.950 --> 00:04:45.610 for example, an API call, as I was just explaining. 91 00:04:45.610 --> 00:04:48.740 It can be really useful to have default values 92 00:04:48.740 --> 00:04:51.600 for the case that we're trying to read a property 93 00:04:51.600 --> 00:04:54.450 that does not exist on the object. 94 00:04:54.450 --> 00:04:56.860 So usually then we get an undefined. 95 00:04:56.860 --> 00:05:01.730 For example if we were trying to say restaurant.menu, 96 00:05:01.730 --> 00:05:03.180 this would be undefined 97 00:05:03.180 --> 00:05:05.840 because there is no property called menu. 98 00:05:05.840 --> 00:05:10.260 We have starterMenu and mainMenu, but not just menu. 99 00:05:10.260 --> 00:05:11.093 Okay? 100 00:05:11.093 --> 00:05:13.620 And so we can set default values 101 00:05:14.720 --> 00:05:17.320 just like we can actually in arrays. 102 00:05:17.320 --> 00:05:22.320 So let's say that we are trying to destructuring the menu. 103 00:05:23.380 --> 00:05:28.040 And so we use equal to set a default value, all right? 104 00:05:28.040 --> 00:05:31.600 And then we can do the same with the starter menu, 105 00:05:31.600 --> 00:05:32.730 for example. 106 00:05:32.730 --> 00:05:35.890 And then we can even combine this syntax here 107 00:05:35.890 --> 00:05:37.703 with what we did previously. 108 00:05:38.600 --> 00:05:39.970 So let me show you. 109 00:05:39.970 --> 00:05:42.993 So let's say that we're trying to retrieve the starterMenu. 110 00:05:43.970 --> 00:05:47.543 So this one, but we then want to give it another name. 111 00:05:49.880 --> 00:05:54.880 So starterMenu, and we want to call it just starters. 112 00:05:54.990 --> 00:05:57.570 And we also want to give it a default value 113 00:05:57.570 --> 00:05:59.620 in case it doesn't exist. 114 00:05:59.620 --> 00:06:02.423 So in this case, just an empty array. 115 00:06:03.340 --> 00:06:05.793 Now, in this case, it actually does exist. 116 00:06:06.780 --> 00:06:08.900 So starterMenu does exist. 117 00:06:08.900 --> 00:06:13.740 And so therefore this default value will not apply, 118 00:06:13.740 --> 00:06:15.750 but it should apply to menu. 119 00:06:15.750 --> 00:06:18.430 Because as I was just saying, 120 00:06:18.430 --> 00:06:23.130 there is no property on the restaurant object called menu. 121 00:06:23.130 --> 00:06:25.193 So menu and starters. 122 00:06:27.440 --> 00:06:30.070 And so here indeed, we get the default value, 123 00:06:30.070 --> 00:06:31.700 which is the empty array. 124 00:06:31.700 --> 00:06:33.763 And here we get the starter menu. 125 00:06:35.170 --> 00:06:37.810 And without this, we would then get undefined, 126 00:06:37.810 --> 00:06:38.743 as I was saying. 127 00:06:39.600 --> 00:06:40.880 You see? 128 00:06:40.880 --> 00:06:44.673 And so this is a nice way of setting a default value. 129 00:06:45.890 --> 00:06:47.120 And once again, 130 00:06:47.120 --> 00:06:50.240 keep in mind that this is especially helpful 131 00:06:50.240 --> 00:06:54.740 when we do not have or data hard-coded like we have it here. 132 00:06:54.740 --> 00:06:58.300 So this is just hard-coded data in our application. 133 00:06:58.300 --> 00:06:59.500 But in the real world, 134 00:06:59.500 --> 00:07:02.710 we usually get the data from somewhere else. 135 00:07:02.710 --> 00:07:04.400 And then we might not always know 136 00:07:04.400 --> 00:07:06.700 how exactly the data looks like. 137 00:07:06.700 --> 00:07:10.550 And so then it's useful to set defaults like this. 138 00:07:10.550 --> 00:07:14.320 Next up, we need to talk about mutating variables 139 00:07:14.320 --> 00:07:16.730 while destructuring objects. 140 00:07:16.730 --> 00:07:18.740 So we did that before with arrays 141 00:07:18.740 --> 00:07:22.423 when we were switching variables, remember that? 142 00:07:23.560 --> 00:07:24.563 So let's see. 143 00:07:25.860 --> 00:07:29.660 Down here, you see that we mutated these variables 144 00:07:29.660 --> 00:07:31.370 that we created before. 145 00:07:31.370 --> 00:07:35.060 But with objects, it works a little bit differently. 146 00:07:35.060 --> 00:07:39.257 And so let's write that here, mutating variables. 147 00:07:42.400 --> 00:07:47.263 And here let's write default values. 148 00:07:49.320 --> 00:07:52.063 So let's say that we already have some variables here. 149 00:07:54.870 --> 00:07:56.063 So a and b. 150 00:07:59.070 --> 00:08:00.850 And then we have this object, 151 00:08:00.850 --> 00:08:05.840 which has a property a of 23, property b of seven 152 00:08:07.670 --> 00:08:11.303 and c of 14, let's say. 153 00:08:12.940 --> 00:08:13.780 All right? 154 00:08:13.780 --> 00:08:16.630 And now we want to destructure this object. 155 00:08:16.630 --> 00:08:20.070 And actually let's first store it into a variable 156 00:08:20.070 --> 00:08:22.943 that makes it a bit easier to work with it. 157 00:08:23.830 --> 00:08:28.560 And so, now actually let us destructure this array. 158 00:08:28.560 --> 00:08:33.400 Now we cannot say const like a, b, 159 00:08:33.400 --> 00:08:38.290 because a and b are already declared up here, right? 160 00:08:38.290 --> 00:08:41.370 We can also not do let, 161 00:08:41.370 --> 00:08:44.270 because again, that would create new variables 162 00:08:44.270 --> 00:08:47.700 and we already have them there, okay? 163 00:08:47.700 --> 00:08:51.623 So here we are missing the object that we are destructuring. 164 00:08:52.530 --> 00:08:55.860 But as I was saying, we cannot do this. 165 00:08:55.860 --> 00:08:59.420 And so, in fact we want to mutate these variables. 166 00:08:59.420 --> 00:09:04.000 So a should become 23 and b should become seven. 167 00:09:04.000 --> 00:09:07.143 But now as we save this, watch what happens. 168 00:09:08.100 --> 00:09:10.960 And so we get a syntax error. 169 00:09:10.960 --> 00:09:12.270 And the reason for that 170 00:09:12.270 --> 00:09:17.120 is that when we start a line with a curly brace like this, 171 00:09:17.120 --> 00:09:21.340 then JavaScript expects a code block, all right? 172 00:09:21.340 --> 00:09:24.590 And since we cannot assign anything to a code block, 173 00:09:24.590 --> 00:09:27.350 like we did here with the equal sign, 174 00:09:27.350 --> 00:09:28.690 then we get this error, 175 00:09:28.690 --> 00:09:31.640 unexpected token with the equal there. 176 00:09:31.640 --> 00:09:32.970 So to solve this here, 177 00:09:32.970 --> 00:09:36.580 the trick is to wrap all of this into a parenthesis. 178 00:09:36.580 --> 00:09:39.853 And so that's the thing that I wanted to show you here. 179 00:09:40.810 --> 00:09:41.920 Okay? 180 00:09:41.920 --> 00:09:46.300 So now if we log a and b, it will work. 181 00:09:46.300 --> 00:09:49.593 So you see, now we get 23 and seven. 182 00:09:50.770 --> 00:09:54.750 So basically we did override these two initial variables, 183 00:09:54.750 --> 00:09:56.300 but in order to do it, 184 00:09:56.300 --> 00:09:59.950 we had to wrap this destructuring assignment 185 00:09:59.950 --> 00:10:02.140 into parenthesis. 186 00:10:02.140 --> 00:10:03.330 All right. 187 00:10:03.330 --> 00:10:07.940 And now, we already know how object destructuring works. 188 00:10:07.940 --> 00:10:10.790 And so now we need to talk about nested objects, 189 00:10:10.790 --> 00:10:13.780 just like we did with nested arrays. 190 00:10:13.780 --> 00:10:16.490 So let's say we wanted to create two variables, 191 00:10:16.490 --> 00:10:18.610 open and close. 192 00:10:18.610 --> 00:10:21.410 And these should contain the open and close hours 193 00:10:21.410 --> 00:10:22.813 for Friday. 194 00:10:23.870 --> 00:10:24.730 Okay? 195 00:10:24.730 --> 00:10:28.650 So you see that opening hours is an object. 196 00:10:28.650 --> 00:10:32.390 And then in that object, we have another object. 197 00:10:32.390 --> 00:10:35.410 So this Friday is an object inside an object, 198 00:10:35.410 --> 00:10:39.180 which itself is inside the restaurant object. 199 00:10:39.180 --> 00:10:40.550 Okay? 200 00:10:40.550 --> 00:10:44.130 Now the opening hours is already an object here 201 00:10:44.130 --> 00:10:46.930 that we have already stored in a variable. 202 00:10:46.930 --> 00:10:49.430 So that's the object that we're gonna destructure. 203 00:10:50.530 --> 00:10:53.483 So nested objects. 204 00:10:55.320 --> 00:10:58.340 So again, we're gonna start with opening hours, 205 00:10:58.340 --> 00:11:00.773 and now we want to retrieve Saturday. 206 00:11:02.470 --> 00:11:04.713 So let's start with doing that. 207 00:11:07.110 --> 00:11:12.050 So just Saturday for now, or actually a Friday. 208 00:11:12.050 --> 00:11:13.793 So I think I said Friday. 209 00:11:17.060 --> 00:11:18.500 So let's see. 210 00:11:18.500 --> 00:11:22.360 And so indeed Friday is this object that we get here. 211 00:11:22.360 --> 00:11:25.170 But remember that we actually want two variables, 212 00:11:25.170 --> 00:11:28.990 one called open and the other one called close. 213 00:11:28.990 --> 00:11:31.120 And this is how that works. 214 00:11:31.120 --> 00:11:33.530 So we know that this is an object, 215 00:11:33.530 --> 00:11:36.900 and now we can further destructure that object 216 00:11:36.900 --> 00:11:39.530 using this syntax. 217 00:11:39.530 --> 00:11:41.450 So the colon, and then again, 218 00:11:41.450 --> 00:11:44.563 the exact property name of that inner object. 219 00:11:45.860 --> 00:11:46.940 Okay? 220 00:11:46.940 --> 00:11:49.250 So that looks confusing, 221 00:11:49.250 --> 00:11:52.260 but that's just the syntax that we have to use. 222 00:11:52.260 --> 00:11:54.660 So maybe you don't even need to memorize this, 223 00:11:54.660 --> 00:11:57.260 but when you need this someday and you will, 224 00:11:57.260 --> 00:12:00.313 then you can just come to this video and see how it works. 225 00:12:01.260 --> 00:12:06.260 And so indeed now we get or numbers, 11 and 23. 226 00:12:06.350 --> 00:12:09.100 And we could of course take this even further 227 00:12:09.100 --> 00:12:12.170 and even assign different variables to these, 228 00:12:12.170 --> 00:12:13.970 just like we did up here. 229 00:12:13.970 --> 00:12:15.363 So with the colon again. 230 00:12:16.310 --> 00:12:18.890 So we could call this one just o, 231 00:12:18.890 --> 00:12:20.333 and this one just c. 232 00:12:21.430 --> 00:12:23.803 So this is taking it to an extreme, 233 00:12:24.800 --> 00:12:26.710 but as I said in the beginning, 234 00:12:26.710 --> 00:12:29.160 destructuring is really powerful. 235 00:12:29.160 --> 00:12:31.530 So there's a lot of stuff we can do with it. 236 00:12:31.530 --> 00:12:35.140 And that's why I'm showing you all of it right now. 237 00:12:35.140 --> 00:12:35.973 Okay? 238 00:12:35.973 --> 00:12:37.700 And now to finish, 239 00:12:37.700 --> 00:12:41.520 let me actually show you a really cool practical application 240 00:12:41.520 --> 00:12:43.340 of this destructuring. 241 00:12:43.340 --> 00:12:47.080 And for that, we're gonna go back to our object here. 242 00:12:47.080 --> 00:12:50.050 So to our example of the section. 243 00:12:50.050 --> 00:12:53.350 And now we will create another method. 244 00:12:53.350 --> 00:12:55.260 So many times in JavaScript, 245 00:12:55.260 --> 00:12:58.577 we have functions with a lot of parameters. 246 00:12:58.577 --> 00:13:02.750 But then it can be hard to know the order of parameters 247 00:13:02.750 --> 00:13:05.240 for someone that is using this function. 248 00:13:05.240 --> 00:13:08.430 And so instead of defining the parameters manually, 249 00:13:08.430 --> 00:13:12.770 we can just pass an object into the function as an argument, 250 00:13:12.770 --> 00:13:15.410 and the function will then immediately destructure 251 00:13:15.410 --> 00:13:16.860 that object. 252 00:13:16.860 --> 00:13:18.920 So let me show you what I mean. 253 00:13:18.920 --> 00:13:23.063 And let's say we want an order delivery. 254 00:13:24.660 --> 00:13:26.703 So that's a new function. 255 00:13:28.460 --> 00:13:29.357 Okay? 256 00:13:29.357 --> 00:13:33.890 And so here, let's just for now call this argument object. 257 00:13:33.890 --> 00:13:36.793 And then I will log that object to the console here. 258 00:13:37.690 --> 00:13:40.970 And now let me call this actually. 259 00:13:40.970 --> 00:13:43.580 And I will do it right here. 260 00:13:43.580 --> 00:13:46.410 So that we can see everything at the same time. 261 00:13:46.410 --> 00:13:49.063 So, that is restaurant.orderDelivery. 262 00:13:53.185 --> 00:13:56.740 And now here comes that object of options. 263 00:13:56.740 --> 00:14:00.820 So as I said, we can now specify some options here. 264 00:14:00.820 --> 00:14:03.370 Let's say the time of delivery. 265 00:14:03.370 --> 00:14:05.603 Let's set it to 23:30, 266 00:14:06.540 --> 00:14:09.230 which is like 10:30 PM. 267 00:14:09.230 --> 00:14:11.490 Let's also say address 268 00:14:14.510 --> 00:14:16.853 Via del Sole, 21. 269 00:14:19.830 --> 00:14:22.040 And then we also specify the main index 270 00:14:23.070 --> 00:14:24.720 and the start index. 271 00:14:24.720 --> 00:14:26.190 So a little bit, 272 00:14:26.190 --> 00:14:28.343 like we did up here in this function. 273 00:14:29.800 --> 00:14:30.883 starterIndex. 274 00:14:34.320 --> 00:14:35.750 Okay? 275 00:14:35.750 --> 00:14:38.970 Oh, and here we need to also give it some value. 276 00:14:38.970 --> 00:14:41.290 Let's just say two as well. 277 00:14:41.290 --> 00:14:42.930 And so... 278 00:14:42.930 --> 00:14:45.903 Yeah, here right at the beginning is that object 279 00:14:45.903 --> 00:14:47.610 that we just defined 280 00:14:47.610 --> 00:14:52.270 because here we are simply logging it for now, okay? 281 00:14:52.270 --> 00:14:55.460 So what we just did was to call this function here 282 00:14:55.460 --> 00:14:59.340 and passing in an object of options. 283 00:14:59.340 --> 00:15:02.680 And that's a pretty standard thing actually in JavaScript, 284 00:15:02.680 --> 00:15:05.210 especially in third-party libraries. 285 00:15:05.210 --> 00:15:08.530 Because now, here in the function arguments 286 00:15:08.530 --> 00:15:12.670 we can actually do destructuring right away. 287 00:15:12.670 --> 00:15:17.433 So we can now say starterIndex, mainIndex, time and address, 288 00:15:23.580 --> 00:15:25.743 which is exactly the four property names 289 00:15:25.743 --> 00:15:27.730 that we have down here. 290 00:15:27.730 --> 00:15:28.563 And of course, 291 00:15:28.563 --> 00:15:31.200 usually we would first develop the function 292 00:15:31.200 --> 00:15:32.400 and then call it. 293 00:15:32.400 --> 00:15:36.310 But I wanted to explain you this way of calling a method 294 00:15:36.310 --> 00:15:37.560 with an object, 295 00:15:37.560 --> 00:15:40.933 so that writing the object here then makes sense. 296 00:15:42.120 --> 00:15:42.953 All right? 297 00:15:42.953 --> 00:15:44.650 And so now instead of the object, 298 00:15:44.650 --> 00:15:47.310 since we did destructuring right here, 299 00:15:47.310 --> 00:15:49.913 we now actually have four variable names. 300 00:15:51.350 --> 00:15:53.630 So we can log them through the console 301 00:15:54.550 --> 00:15:57.760 or actually let's do some nice string here. 302 00:15:57.760 --> 00:16:01.083 So let's say order received. 303 00:16:02.960 --> 00:16:04.610 And then let's get to food. 304 00:16:04.610 --> 00:16:06.373 So based on the starter index, 305 00:16:07.340 --> 00:16:09.393 let's just copy that from here. 306 00:16:13.900 --> 00:16:18.900 So this starts starterMenu at the current starterIndex, 307 00:16:18.980 --> 00:16:22.600 and then also the mainMenu. 308 00:16:22.600 --> 00:16:27.463 So let's again copy that, actually all of this from here. 309 00:16:28.610 --> 00:16:33.610 And we need the curly braces and this dollar sign 310 00:16:37.050 --> 00:16:42.050 will be delivered to, 311 00:16:43.306 --> 00:16:45.743 then the address and then the time. 312 00:16:49.410 --> 00:16:50.243 Okay? 313 00:16:52.320 --> 00:16:53.460 And so indeed, 314 00:16:53.460 --> 00:16:56.921 we get this complete string based on the data that we passed 315 00:16:56.921 --> 00:17:01.360 in this single object, okay? 316 00:17:01.360 --> 00:17:03.970 So that's important to realize. 317 00:17:03.970 --> 00:17:08.060 We only passed in one object into this function, okay? 318 00:17:08.060 --> 00:17:10.070 We did not pass four arguments. 319 00:17:10.070 --> 00:17:13.230 It's really just one argument, one object. 320 00:17:13.230 --> 00:17:14.750 Then here in the function, 321 00:17:14.750 --> 00:17:19.750 as we receive that object, we do immediately destructuring. 322 00:17:19.790 --> 00:17:22.770 And so that's why these names here 323 00:17:22.770 --> 00:17:25.850 need to be exactly the names that we have down here 324 00:17:25.850 --> 00:17:27.300 in the object. 325 00:17:27.300 --> 00:17:29.160 But what's great about this, 326 00:17:29.160 --> 00:17:32.070 is that here the properties in the index 327 00:17:32.070 --> 00:17:33.940 don't have to match the order 328 00:17:33.940 --> 00:17:36.680 in which we do destructuring up here. 329 00:17:36.680 --> 00:17:38.220 And so that makes it really easy 330 00:17:38.220 --> 00:17:40.770 for the user of this function 331 00:17:40.770 --> 00:17:45.080 to specify basically the arguments, all right? 332 00:17:45.080 --> 00:17:46.520 So this is great, 333 00:17:46.520 --> 00:17:50.083 but we can even use some more knowledge that we gained here, 334 00:17:50.930 --> 00:17:53.900 which is these default values. 335 00:17:53.900 --> 00:17:57.770 So we can now use this to basically set defaults here 336 00:17:57.770 --> 00:17:59.520 on some of these. 337 00:17:59.520 --> 00:18:03.550 So let's say that the starterIndex will be one. 338 00:18:03.550 --> 00:18:05.710 If it cannot be destructured, 339 00:18:05.710 --> 00:18:08.200 enter the mainIndex will be zero. 340 00:18:08.200 --> 00:18:12.913 Enter time will be 20:00. 341 00:18:14.930 --> 00:18:16.600 And so now as we call 342 00:18:16.600 --> 00:18:21.060 this our method restaurant.orderDelivery, 343 00:18:25.150 --> 00:18:27.870 I can specify the address again. 344 00:18:27.870 --> 00:18:29.883 Let's actually a copy it from here. 345 00:18:32.360 --> 00:18:35.630 And let me also just specify the starterIndex. 346 00:18:39.240 --> 00:18:40.073 Okay? 347 00:18:40.073 --> 00:18:43.270 But then the rest will be taken from the default values 348 00:18:43.270 --> 00:18:45.263 that we set here for destructuring. 349 00:18:47.300 --> 00:18:50.070 All right, and so here as the second string, 350 00:18:50.070 --> 00:18:55.070 we get will be delivered to Via del Sole at 20:00. 351 00:18:56.000 --> 00:18:57.230 Okay? 352 00:18:57.230 --> 00:18:59.280 So in this object that we passed, 353 00:18:59.280 --> 00:19:03.420 we do not have any property for the time, right? 354 00:19:03.420 --> 00:19:06.710 And so then as JavaScript did destructuring, 355 00:19:06.710 --> 00:19:10.140 it here took the default value of 20. 356 00:19:10.140 --> 00:19:10.973 Okay? 357 00:19:10.973 --> 00:19:13.360 And the same happened for the mainIndex 358 00:19:13.360 --> 00:19:15.360 that we also did define. 359 00:19:15.360 --> 00:19:20.360 So it shows zero and zero is a pizza. 360 00:19:20.830 --> 00:19:24.423 And that's why we get pizza here in the output string. 361 00:19:25.920 --> 00:19:26.753 All right? 362 00:19:28.000 --> 00:19:31.970 So if you ever need to write a function like this, 363 00:19:31.970 --> 00:19:34.950 so a really complex one with a lot of parameters 364 00:19:34.950 --> 00:19:37.410 that might be then hard to specify, 365 00:19:37.410 --> 00:19:39.610 keep this technique in mind. 366 00:19:39.610 --> 00:19:41.610 And this becomes even more useful 367 00:19:41.610 --> 00:19:44.223 as the amount of parameters increases.