Destructuring

Despite the fancy word, destructuring is a pretty simple concept. 0:00 It's also one of the most useful features in ES2015. 0:04 Destructuring lets you extract values from arrays or 0:08 objects then assign those values to distinct variables. 0:12 Let me demonstrate in this code and 0:15 you can follow along by opening the workspace for this video. 0:17 So in the file, destructuring-object.js, 0:20 I have a toybox object with three items in it. 0:23 Using destructuring, I can store the values of item1 of and 0:28 item2 in a new variable and log item1 to the console. 0:32 So when I run this file in the console, you see that it logs the value car. 0:38 In other words, with destructuring we can tear apart or 0:44 destructure an object into individual pieces, we can assign to variables. 0:47 So for instance, I can log the values of item1 and item2. 0:52 And when I run the file the console you see that item one still logs car and 0:58 item two logs ball but if I try to log item3. 1:03 Notice how it throws an exception. 1:09 It tells me that item3 is not defined and 1:12 that's right because we didn't define item3 in this new variable. 1:15 And there might be a reason you'd want to rename a variable from the initial 1:23 property key to something that better represents the value. 1:28 Well, destructuring allows you to declare new variables by placing the key 1:32 on the left side of a colon and the new variable name on the right side. 1:37 So, for instance we can say item3:disc and 1:43 if I console.log this new disk variable, it returns frisbee. 1:47 Now let's take a look at how destructuring works with an array and 1:56 the file destructuring-array.js. 2:00 So in this file, I have an array of widgets containing five widgets. 2:06 With destructuring, I can assign the first three widgets to distinct variables and 2:11 using the spread operator, store the remaining widgets in one separate array. 2:16 So first ,we'll say let []= widgets; then I'll assign widgets1, 2:22 2, and 3 to the variable names, a, b, and c, respectively. 2:30 Then any variable after that gets stored in an array of d. 2:37 So I'll define the variable d with the spread operator by typing ..., d. 2:42 So, now let's make sure that our variables are set to the correct values. 2:48 So if I console.log(a); when I 2:52 run the file in the console, the console output is widget1. 2:58 And if I log(d); We see the array widget4 and 3:04 widget5 and that's right because all remaining widgets are assigned to d. 3:12 So it's a really handy feature, isn't it? 3:20 Now, another good use for destructuring is declaring default values for 3:22 function parameters. 3:27 Over in the file destructuring-default-function.js, 3:29 the getData function takes two parameters, the first parameter is 3:32 an object which has two properties URL and method. 3:37 Now, the value for URL can be null or undefined. 3:43 Method, however, 3:48 will assume the value of post if it's not explicitly defined when getData is called. 3:50 So let's have a look at the console. 3:56 I'll run the file destructuring-default-function.js. 3:59 And in the first function call, we gave URL the value myposturl.com. 4:04 And we did not define a value for method, so it returns the default value of post. 4:11 Now in the second function call, the URL and method have properties defined so 4:17 the console returns myputurl.com and put. 4:24 Good, another example of using destructuring is when you want 4:27 to extract the value of a nested objects property. 4:32 So, for example, in the file destructuring-nested-objects.js, 4:37 we see that child object is nested within a parentObject, 4:42 so, to get the value of this deeply nested title Equally Important, 4:48 we target parentObject then assign the title of childObject to childTitle. 4:52 Now, logging childTitle to the console, Outputs the value equally important. 5:00 So as you've learned, destructuring gives you a more flexible and 5:11 effective way of writing code that's easier to read. 5:15 So good job so far, I'll see you over in the next section of the course 5:18 where we'll review what's new with objects and collections. 5:21