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

Check out a free preview of the full JS.Next: ES6 / ES2015 course:
The "Destructuring Pattern" Lesson is part of the full, JS.Next: ES6 / ES2015 course featured in this preview video. Here's what you'd learn in this lesson:

Aaron takes a step back and explains the logic behind the destructuring pattern. You can only deconstruct an Object. Also, the object must contain the properties assigned during the deconstruction. Aaron also demonstrates how to handle properties not contained in the target object.

Get Unlimited Access Now

Transcript from the "Destructuring Pattern" Lesson

>> [MUSIC]

>> Aaron Frost: I'm gonna explain the pattern real quick because you guys have been seeing this pattern, and I've been vague about what is it doing. It's not as simple as it looks, okay? I know this looks like just some simple syntax. And I'm saying find the name and find the age, and pull them out.

[00:00:26] That's what we're doing. It's actually a little bit more complicated. Whenever you see a brace on the left. If I see a brace on the left it means the thing on the right had better be an object, or I'm gonna get an error ,okay? So yeah, like any time you try and use this pattern if it's not an object, we're in trouble, okay?

[00:00:52] And I'll show you how you can get into that. And the object on the right must have those properties that were say. It's got to have, if I say to structure a name an age out of this thing, it better have a name and an age otherwise we're gonna get an error, okay?

[00:01:09] And this is called an irrefutable pattern. Can anyone say whatever irrefutable means? I can quote if someone gives an irrefutable testimony that means.
>> Off Camera 1: It can't be refuted? [LAUGH]
>> Aaron Frost: It's the opposite of being able to refute.
>> Off Camera 1: [CROSSTALK]
>> Aaron Frost: It's completely qualified, you can't argue with it at all.

[00:01:33] It is what it is, it's irrefutable, okay? And this pattern, when we write it like this, is irrefutable. So if we write like this and I say name. It's gotta be there, or we're gonna get an error. Okay, and that's not very forgiving. And everyone in this room's like dude, JavaScript's way more forgiving them that.

[00:01:53] Why isn't that being forgiving on this? So let me show you a little bit. So here's an example of where it would freak, okay? So if I tried to pull an address out of this person, and we can clearly see on line one, there's no address. We're gonna get an error on this one, okay?

[00:02:17] So it's gonna throw. It's gonna say some sort of I was able to find this proper that you're looking for. The pattern didn't match, not a good pattern. I'm not sure where it will end officially, but you're gonna get an error on the line of code, okay? So how do we get past this now?

[00:02:38] We need some sort of forgivable pattern, right? And so they implemented, and this is what changed majorly, earlier this year. It was set in stone, and maybe it was towards the end of last year. I was solid, the structuring was done, and then they busted out this pattern stuff.

[00:02:59] And I think it made it better. But let me explain it to you guys so that we can kinda rest assured knowing everything's good. So if I do that, you see what I did there? See what's going on there? I got a question mark before the address. We're good again, okay?

[00:03:19] Question mark means maybe, possibly, not 100%, like try though. If it is good, if it is not undefined. Undefined is good, okay? So this is what you are gonna do. Everyone is like okay, I'm gonna try this on the traceur-repl. It doesn't work yet. It doesn't work yet on the traceur-repl.

[00:03:38] So just stay with me cuz it doesn't work yet. And I don't feel worse in Firefox either. So, it forgives address from missing, what are our agent name, they're like what if they're missing. What are we gonna do on those ones? So are we gonna copy? Are we're gonna give everyone their own refutable property and say this actually doesn't even have to be a person.

[00:04:09] You could pass me a book, and it doesn't even have an age, a name, or an address. It's just a thing with a page number and that's it. So we could make every single thing refutable, or you could make the whole pattern irrefutable. Yeah, reputable sorry. Yeah.
>> Off Camera 2: Somebody is just kinda saying why a question mark before variable name, why not after?

[00:04:37] And then, results work in function signatures.
>> Aaron Frost: Yeah, the same question is yes, the first question, why?
>> Multiple: [CROSSTALK]
>> Aaron Frost: Yeah, I mean, I think you're.
>> Aaron Frost: I might not be the best guy to ask that question, cuz I wasn't in the meetings. But I'm sure someone at some point said that.

[00:05:06] I mean, I'm sure that whoever asked this question wasn't the first person. Someone asked that question before. It was decided that it would be first for a reason.
>> Off Camera 3: [INAUDIBLE] operator, and it's also before.
>> Aaron Frost: Is it before [INAUDIBLE] Maybe that's where they got it then. Is the [INAUDIBLE] operator a question mark?

>> Off Camera 3: Yeah.
>> Aaron Frost: Okay, maybe that's where they pulled it from then. That's good to know. Thanks for sharing that. Any other questions? Yeah.
>> Off Camera 4: What happens if the name isn't found it, there's an error. If you use name later as an undefined?
>> Aaron Frost: It's still defined.
>> Off Camera 4: Okay.

>> Aaron Frost: Yeah, yeah, yeah, yeah definitely. So, there's two kinds on undefined, right? Well, depends on who you talk to. You try and use the word undeclared, and people are like, there's no such thing. No, I mean there is. If I try to reference a variable that's never even been mentioned, whether below or above, that actually is like a runtime error, right.

[00:06:01] But if I try and reference something that's just not defined. It doesn't have a value, it's declared but it doesn't have a value, that's just undefined, right? And that may not throw an error. Whereas an undeclared definitely throws an error, right? These will be treated as undefined, they won't be treated as undeclared.

[00:06:22] If you're using the refutability. If you're using irrefutable, it's like it's undeclared.
>> Off Camera 5: [INAUDIBLE]
>> Aaron Frost: It comes after. I don't know why. I'm sure that Douglas Crockford tried to get it after then.
>> Multiple: [LAUGH]
>> Aaron Frost: He did a lot of things to try and emulate a lot, just like which everyone's opinions were shared, and this is where it ended so.

[00:06:47] This is what it is. And because you can't break the internet, I don't think it's gonna change.