ES6: The Right Parts Object Destructuring
Transcript from the "Object Destructuring" Lesson
>> Kyle Simpson: So let's reset back to the case with objects. And a lot of this is gonna start to be more self-explanatory now cuz you already know what to expect because we've seen it with the arrays, a lot of the same things are gonna be true. We could have done this as tmp.a and tmp.b, and tmp.c, okay?
[00:00:36] That would have been the pre ES6 equivalent. Now what we can do is take this function.
>> Kyle Simpson: And we can do an object destructuring, so I'm gonna do an object pattern with curly braces instead of brackets. And in my object pattern. I'm going to say, I want the a property to be targeted to an a assignment location.
[00:01:11] Okay, and I want b to go to b and I want c to go to c.
>> Kyle Simpson: In the case where our target and our source are the same. Meaning, we don't need to do any alias or renaming. We do not have to specify them twice. They can just simply say, ABC.
[00:01:38] It will assume that means go get the property of name a and assign it to a lock symbol variable called a, okay. But if we wanted to for example, reassigned the b property. Instead to a variable called capital X. We now have declared an a variable, an x variable, and a c variable but not a b variable.
[00:02:03] You with me?
>> Speaker 2: So the x is actually the target.
>> Kyle Simpson: Correct.
>> Speaker 2: Not the soldiers?
>> Kyle Simpson: Correct.
>> Speaker 2: Interesting.
>> Kyle Simpson: The way to remember this, is that with object literals, the property name is always on the left. With object destructuring, property name's always on the left.
>> Kyle Simpson: These can of course also have default value assignments.
[00:02:37] So the equivalent from over there, we just add on the equals. All right, with or without the colon, we can add on the equals.
>> Kyle Simpson: Same thing applies here If we return something that was not an object, could have a failure here. So our little guard is to put an empty object to be destructured in the case where something falsey came back.
>> Kyle Simpson: Of course, if our pattern doesn't account for a property. No big deal. That property just doesn't get worried about. If our pattern accounts for a property that doesn't exist. We end up getting a variable that's just undefined because we accessed the d property on an object and it didn't have one.
>> Kyle Simpson: Question in the chat is shouldn't X and b be switched in order? No. This is how it works. Property name is always on the left. That's the easiest way. We can get it in nuances of grammar. And there's ways to twist your brain into thinking it's backwards.
[00:03:59] I have found from my teaching experience and from my personal dev experience. The way to keep this straight in your mind. Is to think, whenever I make an object literal, the object property is always on the left and then there's a colon. When I make an object destructuring, the property names always on the left.
[00:04:16] Now property name and value have or target and source have different meanings those get flip semantically between the two contexts. But the thing that stays the same in the easiest way to keep this straight in your brain, proper names always on the left.
>> Speaker 2: That makes sense when you think about the fact that, that's you know at least in this case you have the var there and that's your target.
[00:04:37] Because that's why I asked it first, because I was like well how can you have ABC on the right hand side when those aren't like existing properties and the answer is you don't. You're creating those.
>> Kyle Simpson: Yup.
>> Speaker 2: Otherwise I would have expected to be like the string A or something to grab that property.
>> Kyle Simpson: Yeah.
>> Speaker 2: So if I wanted to use that structured object, I would just give it a name. Then I could use it for whatever I needed it for.
>> Kyle Simpson: You mean you wanted to capture the object and also the structure.
>> Speaker 2: Let's say, I want to do structure the return value from foo and then store that in a variable to use later.
>> Kyle Simpson: Okay, that sentence doesn't make sense. Once it's destructured it's no longer an object. It's a bunch of individual assignments. You could capture the actual object that came back from foo [COUGH] and then also destructure it, but you can't do it the other way around. So if you wanted to do the form of those which is to capture a reference to it you could have an obj somewhere and you could say,
>> Kyle Simpson: So now obj is gonna be made a reference to the object and then the object reference comes back and gets destructured. So now we have both the object and the destructuring assignments from it.
>> Speaker 2: Is this similar to the array destructuring where you could technically switch those?
[00:06:03] Like does the object destructuring also return the whole object?
>> Kyle Simpson: Yes, they do.
>> Speaker 2: Okay.
>> Kyle Simpson: What's also true is that if you switched them, your var is gonna apply to the first one and not the second one but, yeah. Destructuring both arrays and objects always returns the full thing that's being destructured.
>> Speaker 2: I don't suppose there's anything built in right now similar to a rest for the arrays where you could get all the other properties of the object?
>> Kyle Simpson: That's what we're talking about When we say there's a stage two proposal for object spread and object gather. This would be where you'd want an object gather.
[00:06:39] But then what does exactly that mean? There's a lot of weirdness and specially when we start thinking about prototype chains and stuff like that. What if I gather it into an object that already has a read only property higher up in. It's all kinds of craziness about it.
[00:06:52] But they're working through that spec process to figure out whether or not it's something that can happen. And I think there's a good chance it lands at some point.
>> Kyle Simpson: [COUGH] All right, I'm gonna take up the object one just so or have a little less noise here but a.