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