This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.

Check out a free preview of the full ES6: The Right Parts course:
The "Exercise 3 Solution" Lesson is part of the full, ES6: The Right Parts course featured in this preview video. Here's what you'd learn in this lesson:

Kyle walks through the solution to exercise 3. The solution is located in the file ex3-fixed.js.

Get Unlimited Access Now

Transcript from the "Exercise 3 Solution" Lesson

>> [MUSIC]

>> Speaker 1: Let's talk about ex3-fixed. Just to keep things short and sweet, I will just show the fixed version. But I'll talk you through it. So what I decided was to do object destructuring on the parameter that comes into the response because remember, response is receiving an object. So let's go ahead and just destructure it while it's coming in.

[00:00:27] This lets me not have to do any let or block scoping to contain those temporary variables cuz they're just gonna be contained within the response function itself anyway. So I'm gonna have a foo variable that defaults to whatever default stop foo is and a bar that defaults to default stop bar.

[00:00:43] I'm gonna grab baz as is, which is just an array, and then I'm gonna do these two structurings down inside of bam. Don't forget to put on your default objects, so that your destructuring gracefully fails, okay.
>> Speaker 1: Now to do the restructuring, I can use those concise properties because I named them all exactly the same as the property.

[00:01:06] So it's just foo, bar, barz, and then the qux and qan are inside of the bam object.
>> Speaker 1: Again, this is one of those places where I probably wouldn't keep all those defaults in a separate object if I didn't need to. I'd probably just go ahead and put those defaults right here, for example.

[00:01:31] Yes?
>> Speaker 2: A question from the room, Mike is asking, I don't know if I missed this, but in object destructuring, if there is a listed property not on the object, but up its prototype chain, will the value from the prototype be used or will it be undefined?
>> Speaker 1: Good question.

[00:01:48] So let's assume I did something like this.
>> Speaker 1: So I'm asking for the a property on obj. If we defined obj like this, we know it doesn't have any properties, so it's gonna ask for that a property. If it doesn't find it, just gonna get undefined. But if we made object, if we made that property by doing a linkage to another object which did,

>> Speaker 1: And then we ask for the a property on it. If we did that manually, if we said obj.a, what would we get? Obj doesn't have an a, but it's prototype linked to an object that does, so it would find that a property, right? Same is gonna be true in destructuring.

[00:02:43] If we ask for an a property on an object, but it doesn't have it, and yet, it finds it on the prototype chain, it will pull that one out. So again, just think of destructuring as a declarative syntax for doing all those assignments. And then the behavior of those assignments is exactly the same as if you did it manually.

>> Speaker 1: Any questions about destructuring? If it's still like 80 to 90% fuzzy, don't worry, that's completely natural. It's gonna take a little bit more practice. But of all the things I'm teaching you, this may not be the low hanging fruit stuff. Like dot dot dot dot or the dot dot dot operator and default, those are low hanging fruit, those are easy.

[00:03:33] This is not low hanging fruit, but it also has the biggest payoff in my opinion in terms of code readability. So it's worth the effort.