This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Nested Object Destructuring" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: Of course, if we have an object at one of those positions, like for example, up here. If in the d position, it is its own object and that has an e property on it of the value 4, for example. We can do nested object restructuring, just like we can do nested array destructuring.
[00:00:22] So here instead of putting just d, by itself, I'm going to need to do the d property colon. But instead of having a lexical variable for it to be targeted, I think about this processing wise. What I now need is a destructuring pattern for it to be targeted at.
[00:00:42] So I'm gonna put my destructuring pattern there. So now here is my destructuring pattern, now I have an e variable, that is the value for.
>> Speaker 2: [INAUDIBLE]
>> Kyle Simpson: Yep, absolutely. We hadn't gotten to that, but since you asked. Can't really straightforwardly do that with arrays, but with objects we can account for d a whole bunch of different times if we wanted to.
[00:01:19]
>> Kyle Simpson: There we've assigned off whatever was in d, which is an object, into variables, x and z. And yes, that overwrote the b, cuz it's going in the top down. And we've also destructured the contents of d's e property, into any variable. So we can multiply the account for a property.
[00:01:41]
>> Kyle Simpson: Yes.
>> Speaker 3: From Anthony. If you set in the pattern a default value for a property of an object, but that property does not exist for the object, do you still get undefined or will you get the default value side?
>> Kyle Simpson: So it's exactly like with parameters. The question is does the absence of an object property represent the undefined condition?
[00:02:03] And the answer is absolutely, yes. As long as that property doesn't have a prototype or some proxy or something like that. Yes, the absence of a property ends up behaving like It got back undefined. Just like if you said o.abc of some random object, you get back undefined.
[00:02:20] Same thing here. If undefined comes back, the default condition kicks in and gives you that value instead, okay. All right, now what if this d object, which we're doing of the structuring, what if it didn't exist? What would happen?
>> Kyle Simpson: We would be trying to destructure an undefined value which is an exception case right?
[00:02:51] So guess what we need to do here? Provide a default.
>> Kyle Simpson: Okay?
>> Kyle Simpson: Similar to how we provided a default here using the OR operator, because that's JavaScript in de-structuring syntax. We need to provide a default empty object to be destructured, in the case where d doesn't come back.
[00:03:17]
>> Speaker 4: So that default is used as the source of the destructuring, right? Not the-
>> Kyle Simpson: The value. Yes.
>> Speaker 4: Okay.
>> Kyle Simpson: The value to be to destructured. Going back for just a moment in this particular case where we have a pattern that looks like this.
>> Kyle Simpson: Comes from some value somewhere.
[00:03:45] The processing order is a little strange here, okay. And this is part of what takes a little bit of getting used to. Because what's gonna happen first, is it's going to go and look and see if there isn't a property. So we're starting here in the left it's gonna say is there an a property, in the object that we're expecting?
[00:04:01] The answer is no, it's then gonna go all the way over here to the right and say, okay, let me go ahead and get the default value to use for that in place of that property. Then it's going to come back and say, what is my target? In this case, my target is a regular, lexical variable, but my target could have been another pattern.
[00:04:21] But so, it's going to go from the left to the right, and then back into the middle. So that is a processing order that seems a little awkward in those cases. But if you think about it in terms of the imperative code that you would have written it makes more sense.
[00:04:34] Cuz you would have written it in that order. You would have said, go look and see if it's there. If not, apply the value, and then assign it somewhere or destructure it somewhere. Okay? So you have to get used to doing that left right middle sort of jump.
[00:04:50] It's not strictly left to right here.
>> Kyle Simpson: If we can do objects inside of objects, and arrays inside of arrays, of course, we can do objects inside of arrays and inside of objects. So this could have been an array destructuring, a nested array destructuring, where we're expecting an array.
[00:05:11] But what our default value should be here? Should be an empty array, instead of an empty object. Okay? Now, I don't know for sure, why they didn't make this required. Because, I'll tell you that 99.99% of the time I want it. And 98.99% of the time I forget it.
[00:05:35] I've been doing this a while now and every single time I write it I forget it. I've already forgotten it twice today when I intended to put it in our earlier discussion of arrays. Okay, I forget it all the time, and I wish it was like a grammatically required thing.
[00:05:48] I can make a guess as to why it's not grammatically required. And the guess is it might be the case that you want a hard failure if something's missing. If you want a hard failure you leave off the default value and you'll get a hard failure. Most of the time I don't want hard failures.
[00:06:07] Most of the time I wanted to gracefully recover or figure out, okay, just destructure an empty array and leave me with my default values, don't bother me with that, okay. So most of the time I prefer that soft fallback, sort of behavior. But it might be the case that you run into an occasion where you want the hard failure.
[00:06:23] You want to catch it with a try catch or whatever, okay. So that's why you are allowed to leave it off. Here's my opinion, you ought to get a limb to rule that forces you to put it in every time. And there are Lint rules written that force you to put in the default assignment for your destructuring.
[00:06:42]
>> Kyle Simpson: For your nested destructuring, specifically.
>> Kyle Simpson: One last little detail about the object destructuring, before we start talking about maybe some more practical usages of it. One last little detail is that your object can also be just a general assignment destructuring. So if I all ready had all those all ready created in like var a, x, c, e.
[00:07:16] So if all ready have those all ready created, then I could just do a general object destructuring. However, unfortunately, this is not legal syntax to start a statement with a curly brace, cuz that's assumed to be a block. So in this specific case, where you don't have a declarer there, you have to wrap the whole statement in a parentheses, just to let it know this is an object destructuring not a block label.
[00:07:43] This is part of our problem with overloading the curly brace to mean 15 different things in 15 different places. Okay.
>> Kyle Simpson: I don't regularly do this. Most of the time when I'm doing destructurings, I have a declarator there. But if you're not doing a declarator, just remember the object needs the parentheses, the brackets don't.
[00:08:16]
>> Kyle Simpson: If all this still feels too abstract, you're going to get an exercise on this in just a few minutes. So you're going to get a chance to practice it a little bit more. But it's going to take a lot of practice to get there. Trust me. It took me weeks of banging my head against it, and I don't understand, it seems the wrong order, whatever.
[00:08:33] I get it. There is a learning curve, and it's a steep cliff. But what I'm really trying to get across is that the payoff is huge once you get there. That it really starts to simplify an awful lot of things that we've been doing very manually in our code.
[00:08:47] It starts to create more self documenting code, more declarative style code and that's much more readable.