Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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
You need to sign up for Treehouse in order to download course files.
Sign up