Instructor: Let's now talk
about something called destructuring.
Destructuring gives us a very convenient way to extract data
from a data structure like an object or an array.
Imagine that we had an array filled with some data,
and that we now wanted to store each of the elements
of that array in a single variable.
Let's start, again, with doing it in ES5, right,
and let's first write our array, so a very simple array.
Just with the name and the age of John, okay, and 26.
If you wanted to store each of the elements
in a separate variable, we would simply
have to write one variable for each element just like this.
The name and it's the first element of John, so zero,
and then a variable for the age and john[1].
Okay, so now we have both elements in separate variables.
Now imagine that we had like five or 10 elements
in that array.
Then it would become a bit impractical
to do this every time like this, right,
and so in ES6 we have something called destructuring,
once again, and it would work like this.
So ES6 now.
With destructuring we can destructure a data structure
just like this.
We create a new variable, and then
in here we put name and year
and then we put our array in here, John and 26.
What this is gonna do is it's gonna create
a constant called name and a constant called year,
and then this data will be stored in each of the variables.
Let's actually check that, so console.log with the name
and with the year, and actually it should be age, okay?
Let's check it out.
Okay, the problem here is, of course,
that I already used the variable called name before, right,
so let's just get rid of this,
and now it's gonna work, of course.
Okay so, again, we destructured this data structure here
using this kind of syntax here, so it's like the opposite
of constructing a data structure.
With this here we construct, we build, a data structure,
and then with this syntax here we destruct it.
This, actually, also works with objects.
Imagine we had an object.
I'm simply gonna call it obj.
So firstName and lastName
as usual, right?
Now destructuring works in exact same way.
All we have to make sure is that the keys actually match
with our new variable names, so let's do that.
Now it's an object, and so we use the curly braces here,
of course, because the object is also constructed like that,
so that's also how we destruct it, okay?
We write firstName and lastName, and remember
that these keys here have to be the exact same thing here,
so these new variable names have to match the keys.
Now we just say object, and that's it.
Now we created two brand new constants
which store the data out of the object.
Let's just very quickly check that.
FirstName and lastName, and here we go.
Now if we don't want the variable names to match
with the key names, then we can also use different names,
and it's gonna work simply like this.
Again we use the curly braces.
Then we say {firstName: a, for example
if you wanted the variable to be called a,
and then lastName: b} = obj;
and that's it,
so let's just quickly see if we have the same.
Yeah, again, it's John Smith here.
Okay, so this is how destructuring works, but let's now see
a more practical application of destructuring.
A very good application is to, actually,
return multiple values from a function,
so in a more easier way than we used to do before.
At ES5, usually, if we had more than one value
that we wanted to return from a function,
we would simply return an object, but now with destructuring
it got a bit easier, so let's try that out.
Let's create a function that returns the age of a person
as well as the remaining time for retirement.
We used that before, but now we're gonna use both
of these concepts in the same function, okay?
So a function calcAgeRetirement,
and that's based on a year that we input.
So const age, so let's now create a new date here, okay,
so that, or year, is always up to date.
So getFullYear instead of simply using 2016
or something like that, so instead of hard coding it here.
Minus the input year, so let's now return both
of the age and the years until retirement,
and so we simply return an array with this data,
so age and then 65 minus the age, so supposing
that 65 is the age at which we can retire.
It could be something different, but let's assume it's 65.
We used that before, and so that's how we do it here.
All right, so this returns an array.
Now all we have to do is to use destructuring
in order to store this into different variables.
We want age and retirement, and this is, of course,
the result of calling the function with, let's say, 1990.
We're now gonna have two different return values.
Let's just take a look at them,
age and, of course, the retirement.
Okay, so we have already used a variable called age.
Let's just call it age2 here,
and it really doesn't matter, right?
Okay and now it works, so these are the two return values
that come from our function,
so destructuring is a good solution
for this particular case, and we're actually gonna see
more applications of destructuring,
at least one more, later in the course.
Stay tuned, and come with me right to the next lecture.