Preview
Video Player
00:00
00:00
Destructuring
5:24Destructuring 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