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 "Patterns In-Depth" 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:

Now that Aaron has described the Irrefutable and Refutable patterns in destructuring, he goes a little deeper into their intricacies. He demonstrates different ways they behave based on their refutable nature, default values, and nested position.

Get Unlimited Access Now

Transcript from the "Patterns In-Depth" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Aaron Frost: So I've kind of showed you how you would use patterns. Let's talk about the intricacies of the patterns. So if I tried to pull a out of empty object, it's going to throw. If I refute the whole thing and I try and pull a out of it and assign it to x, x is just gonna be undefined.

[00:00:27] If I try and pull a out of 0, I'm going to get undefined, as long as I've made the whole thing refutable. If I just refute a in an empty object, I'm still okay. And if I only refute a on 0, like I'm trying to pull a out of this primitive, but I didn't refute the whole pattern, then it's going to freak out.

[00:00:55] Cuz the second it gets into this pattern, it's gonna try to treat it like an object, which is you know make you freak out. So you'd have to refute the whole thing if it wasn't an object so. Was that too much? No, we're good, cuz I've got more.

[00:01:15]
>> Aaron Frost: So here on the first one, we refuted the whole, entire pattern. And we've said pull a out of undefined and set it equal to x and if that's undefined then the default value is 1. So, in the first line x is going to equal 1. Everyone see that?

[00:01:35] We're good. Okay. In the second one, I'm only refuting a. So I've got the brace at the front, which means it's going to expect what's ever on the right of the equal sign to be an object. Which undefined isn't, so it's gonna throw. Even though I'm trying to say, well I mean if it's empty, if it's undefined, just make it 1.

[00:01:58] Well, your pattern wasn't the kind that can escape errors, you'd need to refute the whole thing if you're gonna possibly get a 1 in there. And then again, if you just refuted a single property on an empty object, as long as it's an empty object you're good to go,.

[00:02:17] So good question. Diego says, do I want to throw errors? I don't know, you may.
>> Speaker 2: It was I think [CROSSTALK]
>> Aaron Frost: If you're writing a framework it may be more important than if you're up to [CROSSTALK]
>> Speaker 2: Again, I think they were kind of asking earlier, somebody was saying it kind of looks like you're just refuting every object everywhere.

[00:02:38]
>> Aaron Frost: That's the thing, that's why I was like dude I'm not sure that the first time I read this I was like explain to me when I wouldn't refute. It's just gonna be like a pattern with a ton of question marks peppered in. Like why wouldn't I just refute the whole thing?

[00:02:56] And that's a good question,man. And they may change it in the next version because I think everyone is gonna wonder that same exact thing. I wondered it the first time I saw it and tried it out, too. Yeah?
>> Speaker 3: I'm sorry I know you already said this, but can you have a default value if you don't refute?

[00:03:16]
>> Aaron Frost: So-
>> Speaker 3: I mean, like your default value seems to imply irrefutable.
>> Aaron Frost: Yes, so check this out, as long as the key was there. So, can I actually do this here?
>> Aaron Frost: Okay, so if I say
>> Speaker 3: Okay yeah.
>> Aaron Frost: Sorry.
>> Aaron Frost: What the French? I don't know.

[00:04:06] You should be able to. I don't think this is the working implementation cuz this should work and it's not so. So, yeah good question though.
>> Speaker 2: So is it just work like essentially like using the double pipe, like if it's falsy it'll just go to your defaults or is it for undefined?

[00:04:27]
>> Aaron Frost: I think it's just undefined. It's not falsy. Yeah, it's not falsy. And we'll get into default values in a second, so we'll talk about what triggers that assignment expression. Does anyone have any questions about this, about these patterns with default values? So far we're good. How awesome is this one.

[00:04:52] Someone asked about nested objects. What was your name?
>> Kim: Kim.
>> Aaron Frost: Kim. So Kim you asked about nested objects. So this is nested objects. So I'm gonna highlight, the stuff that matters. So we're trying to do structure. So we said, find the b property and pull the c out of it.

[00:05:20] The sun is bad. Pull the c out of it. But we didn't add any refutability to this, so this is irrefutable. So when we're trying to pull c, out of that and it's not there, it's gonna throw an error. But maybe we can do an example. Maybe I have another site where we do this.

[00:05:41] But if I wanted that to be forgiving, we could just refute that one piece, and then it wouldn't matter what b is equal to. It would accept it because it's refutable. And then over here we refuted the whole entire statement. So nothing needs to be anything really. Everything will equal undefined if we don't.

[00:06:11] This whole side could be undefined and because we've refuted the whole side, we should be safe. So that's nested. I think I have some more examples of it though. Yeah, sorry nested, I skipped this. I even have a slide saying I skipped this, but I forgot that I wrote.

[00:06:32] Okay, so if I wanna pull out address and I don't necessary want an address variable all I really care about is the city, states and zip. This is how you would do that. You would say find the address and pull out all the city, state and zip out of it and make those three variables.

[00:06:53] So, I actually here I wouldn't end up with an address variable. So yeah, any questions there?
>> Aaron Frost: Everyone see what's going on? So here, as far as of available variables I could reference, I'd have name, age, city, state, and zip. I wouldn't have anything else. Any questions? You guys all kind of look glazed over so I feel like I'm not doing a very good job right now I feel like I've lost it.

[00:07:30] We're good?
>> Speaker 2: It's good, it's just a lot of, I mean, this is pretty straightforward syntax, but would call that or with a question mark-
>> Aaron Frost: With that last slide?
>> Speaker 2: For extension and the defaults, that one's, kind of, I would need a minute to destructure that one in my head.

[00:07:44]
>> Aaron Frost: Yeah, come punch me in the face and it will probably look better afterwards, right?
>> Speaker 2: [LAUGH]
>> Aaron Frost: Yeah, I know it's a lot to take in. So, here's how I can alias the city, state, and zip again on the nested pattern. Did anyone wanna ask questions? Like, I'm just gonna show this, just to get the look back?

[00:08:01] Hold on? Cuz this is where everyone kinda was like, no, yes, five, whatever. Yeah, so all right, you still have smiles, I'm gonna leave it up here. Does anyone have any questions about it we talked about? Internets, you guys just get it?
>> Speaker 2: So that one lingering question I mentioned was Ben had asked can you destructure every property?

[00:08:31]
>> Aaron Frost: Yeah, so can I destructure with like a star? No. No, no, no and let me explain why. So, Ben was saying, can I do this? Ben wanted to do this. So we got person up there, var. Ben wanted to know if I could do that. And I just have it throw all the properties from person on to the current scope as variables.

[00:09:10] No, you can't do that. So, so yeah, you're welcome. Hopefully, no one else wanted to do that cuz I don't think I was a very good idea. But yeah, so you can't do that, star is not part of this pattern. I know it's part of a lot of patterns and we've kind of we see star ,we hear the word pattern and we're like star.

[00:09:36] No, there's no a star in this pattern.