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.