Destructuring Assignment in ES6
ECMAscript 6 destructuring provides flexible options for variable assignment.
Narrator: [00:00] Typically in JavaScript if you have an object with a property and a value, and you want to log out this value, you would do some sort of assignment. Let's say object. Then when you log it out, you would say that object, and then the property name. You could run it and you would see the value in the log.
[00:18] Destructuring allows you to do this in a little bit different way where, instead of doing this sort of assignment, I would say look up the color property and make that available so that I can just log out color and when I run this again, I'll just get blue again. Meaning that this says find this guy and assign it to...so I have blue here available, and now color is available for me wherever I want to use it.
[00:42] Now this also works if I have multiple properties and I want to get the color and the position. I could just say "color", then ", position". Then I can log out the color and the position and they're both available now, so I can log out "blue" and "forward".
[01:00] A very common scenario where you will see destructuring come into play is when you have a function which returns an object but you only want the name and the state off of that return, so I'll just say "var" and then I'll say "name, state".
[01:16] Then I can simply use the name and I can use the state. I can run this and I can get "John" and "New York" because name was found here, which was John, and state was found here, which was New York. Once I logged them out, I got only those things that I wanted.
[01:34] If you want these named something else, you can actually just put a colon in here. I'll say "first name" and I'll say "location". This means still look up the name, but instead assign it to "first name". Look up the state, but instead assign it to "location". So that when I go "first name" here and I go "location" here and I run this, I'll still get "John" and "New York".
[01:56] Now where this gets crazy, and also a little awesome, is when you have an array and you only want the first item and the fifth item and you don't care about the second, third or fourth. I can do the array syntax, so "var" and then assign an array.
[02:11] I'll say first and then the second item, don't care about. Third, don't care about. Fourth, don't care about. But I do want the fifth, and I'll just name it first and fifth. I'll log out the first item, then I will log out the fifth item.
[02:26] Then when I run this, you can see I get "red", because first is assigned to red, and "orange", because fifth is assigned to orange. If I wanted to start putting in second, third, fourth, I could, but right now they're not accessible, because there's just empty commas in there.
[02:43] For this example we have an array of people which are just objects with some people first name, last name, et cetera on them. I want you to watch very carefully as we do this, because I'm going to take the people.
[02:53] I'll go through them with a four each, and then we'll pass on a function. I'll use the arrow syntax, so that's the arrow syntax for a function, and I'm going to destructure the parameter that comes in. This would typically be the person.
[03:07] I'll say I only want the "first name" off of it, so that when I log this out I can get the first name. I can run this and I can log out all of the first names of those people, because what happened is this function took in the destructured version of this, saying only give me the first name of all of these people that come in. Then I can log out just the first name.
[03:33] Lastly, to combine a couple of these concepts, if I want to get Skyler, I can actually use that array syntax, and I'll just say ", "Skyler"" and assign that to people, meaning that this is going to skip the first one, look up the second one and name it Skyler. Then I'll make a function which I'll call "log email", which will take a destructured of that object of just the email property, and we'll say "log email".
[04:03] Then when I say log the email of Skyler, and I run this, it logs out Skyler's email, which is right here, because it looks up the second item, names it Skyler. This is not looking up the name Skyler, it's just naming it Skyler from people. I'm logging Skyler's email, which is destructuring that Skyler object, and only taking the email off of it and logging out the email string, which is this.
Is destructuring often used in modules import ? e.g. import { XX } from 'xxx/core' ?
Hi, it is a pity that you mix old ECMA 5 and ECMA 6 script together in every session of the course "Learn ES6 (ECMAScript 2015)". So it would be nice to just use "let" instead of "var" always. And for sure some the other stuff you very nicely introduce. So would would have a much better learning effect.
But I love your way of introducing things in short videos.
At about the two minute mark, when you use state:location the state becomes part of your url on reload. The page returns a file not found error as es6/index.html becomes es6/New%20York. So location is a keyword to be avoided.
Code in transcript is wrong.
var [,Skyler] = people;
Should be:
var [Skyler,] = people;
Great examples. Your videos are one of the reasons I subscribe to Egghead.
Hi, I am playing around with the examples. Just wanted to add a second parameter to the arrow function inside like:
people.forEach(({firstName},{lastName}) => {
console.log(firstName) || displayInPreview(firstName);
console.log("lastName",lastName || displayInPreview(lastName));
})
But I get undefined for the lastName. Any ideas to display there other parameters? Thanks!
I like the Skyler example at the end as it combines a few concepts - the downside of course is it assumes the order of objects in the array won't change. For that reason I'd just use .find() and then perhaps de-structure the response as needed.
Hi Lluís Peinado, If you put lastName just next to firstName then it works.
people.forEach(({firstName, lastName}) => { console.log(firstName) || displayInPreview(firstName); console.log("lastName",lastName || displayInPreview(lastName)); })
Destructuring is a shortcut syntax. Assignment of Skyler to Skyler object forced me to rewind.