Object Destructuring

[00:00:02]
>> Kyle Simpson: Let's switch gears and talk about object destructuring. In many ways it's gonna be very similar to the same that we've experienced with array destructuring,
>> Kyle Simpson: But there will be some nuanced differences. So let's say that we were going to return an object that had a1, b2, and c3 on it.

[00:00:29]
And we are going to pull out, assign that to a temp variable and then pull out its contents. So we might say var first = temp.a, and second = tmp.b, and third = tmp.c. What's the destructuring equivalent of that? Since I'm lazy, I'm just gonna copy this function.

[00:00:57]
All right, so we don't need to make a temp variable unless there's some reason to get it like we showed in the previous array destruction discussion. So we just need to make an object destructuring pattern. So data and I'm gonna take, and instead of like with arrays where it was an indexed position that I used as the source, right?

[00:01:24]
If it showed up in the first position of the array destructuring and knew that was position zero is the source. Here with objects, since position doesn't matter, we have to tell it what's the source to be assigned. And the way we tell it that is to give it a property name.

[00:01:39]
So the property name that we're getting it from is a in this case, and we want a to be assigned to a variable called first. So, it is source: target.
>> Kyle Simpson: And then, b:second, and c:third. And of course, because these are properties, we can have them in whatever order is convenient and readable for us.

[00:02:08]
Whereas with arrays, the position matters. When we're talking about objects and properties, the position doesn't matter.
>> Kyle Simpson: All right, exactly the same as is with arrays, what happens if I return no c, what is third gonna be?
>> Speaker 2: Undefined.
>> Kyle Simpson: Undefined, same is true over here. If the object doesn’t have it, it’s not there.

[00:02:40]
So if I returned extra stuff,
>> Kyle Simpson: If I return extra stuff what happens to the extra stuff? It gets ignored, same thing. Now what if I wanted to collect any unaccounted for properties, let's say that I didn't account for third, or for temp.c, what if I wanted to collect c and d or the values 3 and 4?

[00:03:18]
Well, I'm not gonna actually write out the code for that, but you can imagine it would be a little bit more complex because I would essentially have to take a list of the keys from the object that exist. Filter out the ones that I've already accounted for, and any of the ones that were left, make them into a new object, right?

[00:03:37]
So you could imagine three or four lines of that sort of looping logic with object.keys and I could get just c, d, e, and f, if they were there, added on, and ignore a and b. Well, there's a much easier way of doing that with the destructuring pattern, and it's called object rest.

[00:03:57]
So just like with arrays, where you could do a dot dot dot, and collect values into an array, when we're in an object destructuring, and you do dot dot dot, you can collect all the rest of that into an actual object. So this is a whole separate object, and in this case, third would be an object that included the properties c and d.

[00:04:21]
>> Kyle Simpson: Separate object that got those properties copied into it.
>> Kyle Simpson: If I wanted to provide a default backup, in case a was missing? If we said a was missing in this case, and I wanted to provide some sort of default over here then I could have done the whole ternary thing, !=== undefined.

[00:04:48]
And then tmp.a, and then a backup of the number 42. So that would have been valid, but if I wanna do that with an object destructuring pattern, any guesses?
>> Speaker 3: Set a default?
>> Kyle Simpson: Just set a default, it looks a little stranger here, since there's three elements going on.

[00:05:14]
And you just have to remember that it's source, target, default. Takes a little getting used to that whole order of source, target, and default. Speaking of that difference, I want to call that out for just a moment because I know that it has created some confusion for folks, it created confusion for me for at least the first week or two.

[00:05:38]
So let's talk about that whole choice that they made to have it be in order of source, target. Cuz the first time I was learning destructuring syntax, my brain was programmed into target source, and I kept getting those backwards. And then after about a week, I have this light bulb moment and it occurred to me, I get it, I know why they do that now.

[00:06:00]
And then I never struggled with it again. So let's look at that, when I make an object literal, make this little bigger here. If I make an object literal, we know that the property and then the value. We know that that's the order for an object literal and we know that in this particular case, the property is serving the purpose of the target, and the value is serving the purpose of source.

[00:06:29]
So then later, when we try to do a destructuring and we say something like,
>> Kyle Simpson: A source and a target, then we end up listing source:target, which is the opposite of target: source. And again, for the first week of me learning this syntax, I was banging my head against, why'd they flip it?

[00:06:53]
That's so dumb, why'd they flip it and then I figured out why its flipped. Because the role is not the important part. Whether it's a target or a source or a source or a target, those are flipped. But here's what's really interesting about it. If you think about instead of role identity, guess what?

[00:07:19]
It is property value. The property serves the role of source here and it serves the role of target here. But if you can always remember that the object property is on the left, then of course it's consistent between the two syntaxes
>> Kyle Simpson: So, just keep in mind, property always goes on the left, the thing that we're getting it from or the thing that we're assigning it to always goes on the right.