Despite the fancy word, destructuring is a pretty simple concept.

It's also one of the most useful features in ES2015.

Destructuring lets you extract values from arrays or

objects then assign those values to distinct variables.

Let me demonstrate in this code and

you can follow along by opening the workspace for this video.

So in the file, destructuring-object.js,

I have a toybox object with three items in it.

Using destructuring, I can store the values of item1 of and

item2 in a new variable and log item1 to the console.

So when I run this file in the console, you see that it logs the value car.

In other words, with destructuring we can tear apart or

destructure an object into individual pieces, we can assign to variables.

So for instance, I can log the values of item1 and item2.

And when I run the file the console you see that item one still logs car and

item two logs ball but if I try to log item3.

Notice how it throws an exception.

It tells me that item3 is not defined and

that's right because we didn't define item3 in this new variable.

And there might be a reason you'd want to rename a variable from the initial

property key to something that better represents the value.

Well, destructuring allows you to declare new variables by placing the key

on the left side of a colon and the new variable name on the right side.

So, for instance we can say item3:disc and

if I console.log this new disk variable, it returns frisbee.

Now let's take a look at how destructuring works with an array and

the file destructuring-array.js.

So in this file, I have an array of widgets containing five widgets.

With destructuring, I can assign the first three widgets to distinct variables and

using the spread operator, store the remaining widgets in one separate array.

So first ,we'll say let []= widgets; then I'll assign widgets1,

2, and 3 to the variable names, a, b, and c, respectively.

Then any variable after that gets stored in an array of d.

So I'll define the variable d with the spread operator by typing ..., d.

So, now let's make sure that our variables are set to the correct values.

So if I console.log(a); when I

run the file in the console, the console output is widget1.

And if I log(d); We see the array widget4 and

widget5 and that's right because all remaining widgets are assigned to d.

So it's a really handy feature, isn't it?

Now, another good use for destructuring is declaring default values for

function parameters.

Over in the file destructuring-default-function.js,

the getData function takes two parameters, the first parameter is

an object which has two properties URL and method.

Now, the value for URL can be null or undefined.

Method, however,

will assume the value of post if it's not explicitly defined when getData is called.

So let's have a look at the console.

I'll run the file destructuring-default-function.js.

And in the first function call, we gave URL the value myposturl.com.

And we did not define a value for method, so it returns the default value of post.

Now in the second function call, the URL and method have properties defined so

the console returns myputurl.com and put.

Good, another example of using destructuring is when you want

to extract the value of a nested objects property.

So, for example, in the file destructuring-nested-objects.js,

we see that child object is nested within a parentObject,

so, to get the value of this deeply nested title Equally Important,

we target parentObject then assign the title of childObject to childTitle.

Now, logging childTitle to the console, Outputs the value equally important.

So as you've learned, destructuring gives you a more flexible and

effective way of writing code that's easier to read.

So good job so far, I'll see you over in the next section of the course

where we'll review what's new with objects and collections.