JS.Next: ES6 / ES2015 JS.Next: ES6 / ES2015


Aaron Frost
Check out a free preview of the full JS.Next: ES6 / ES2015 course:
The "Destructuring" 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:

Destructuring allows developers to bind a set of variables to a corresponding set of values. The syntax can seem backward since braces are used on the left side of the assignment. Aaron walks through a simple example to help explain this technique. He also show how to alias the variable names being destructured.

Get Unlimited Access Now

Transcript from the "Destructuring" Lesson

>> [MUSIC]

>> Aaron Frost: So destructuring allows you to bind a set of variables to a corresponding set of values. Anywhere that you can normally bind a value to a single variable. Awesome right? We're like what does that even mean. Okay. So normally we build stuff and when we take things apart when we destruct an object it's always with manual destructuring adds a lot of well not a lot of adds some new syntax and some new paradigms into JavaScript.

[00:00:40] Things that we haven't seen before. And we're gonna talk about those. We're gonna talk about pattern matching. The pattern matching the more we get into it the more advanced they can be in it. It Changer this year and I think it's solid again. However it could change again.

[00:01:00] But, for now, and you guys are like, what does pattern matching even mean? But I'll show you. So, but some of this stuff, I mean, I don't think it's going to change, but it could. So, there's really two approaches, there's two main things you're trying to destructure. When we pull an object apart what are we trying to pull apart?

[00:01:21] We're trying to pull apart bits of JSON right. We're trying to pull apart arrays. Really, when we take something I want to do with that piece that array or give me give me this value by this key into an object we trying to pull apart. And so we're gonna I'm gonna talk about those separately not in the same section of slides because they are different.

[00:01:41] And when we talk about patterns, the patterns change. And the concepts are similar, but the stuff's gonna change. So we're gonna talk about them separately, structuring objects and then we'll talk about destructuring arrays second. So here's kind of your first view at destructuring. So Imagine I have like this this object at a city say it is that BEEN it and I go I go I called get an address to get it.

[00:02:11] OK. And I want to pull I want to I want to pull the city in the state. This is about. So, this is the syntax you're going to use to put up with the structure. OK. And with just one line of code, I've got three new variables. That all went into the return that value of that get address call to say hey, I'm equal to the city property of that object.

[00:02:34] State says I'm equal to the state property of that object. And zip said I'm equal to zip of that object Very sense. What's going on there? And then you can kind of log them separately. So, normally we spend like the tour to the top of our functions. We spend a lot of time, like making sure something is got a default value, and pulling things out, and We spent a lot of time of at the top of each our functions kinda data proving the function and, kinda setting up the code that is gonna run below.

[00:03:08] And destructuring helps us get that done quicker, okay. So helps us pull incoming objects apart so.
>> Aaron Frost: Sorry. Okay. So You could. Yeah.
>> Aaron Frost: Okay, so one thing to notice is that we have braces on the left side of the same expression now like we've never really seen that before.

[00:03:36] Before the braces have only ever existed on the right side of an assignment expression so whenever we've seen an equal sign. It's not been on the left, unless we're comparing an object on the left to something like, but that's a comparative that's not equals, right? So when we're assigning something we've never been able to have a curly brace on the left side of that.

[00:03:59] So that's a new thing that they kinda when you look at this that might be kinda what grabs you first. And we were able to make three separate variables just by comma separating them. OK. And this this over here this is called the restructuring pattern. OK. So I had to call those things very specific names like I knew in an address there was a city property so I called my value my variable city as well.

[00:04:25] Otherwise this would've worked. Like if I tried to get through out of it there's probably not a foo in the address, a foo properties. If I want to alias in though like let's say I wanted to pull city out and I wanna call it c this is kind of the pattern that you would use and if I want to pull state out And I wanna call S, in zip.

[00:04:49] And call it Z. This is the syntax, that you would do that with. So you can kinda alias, some names. So if we want to dork around with this.
>> Aaron Frost: Yeah,. Yeah, yeah, yeah, yeah.
>> Aaron Frost: Okay. So, I'm gonna turn this off. Show generated code, okay. So, this is kind of how you would use it.

[00:05:28] When I log the city, state, zip, the c, s and the z, this is what I get. If I try and log city, state, zip, it's not gonna have them anymore. It freaks out and actually throws a compile error. It says, I can't find city, and it would do the same thing for state or zip.

[00:05:46] So this is kind of destructuring on the fly. So this is kinda how you alias the names of the things that you're pulling out. So this becomes the name of the property inside the address, and then you wanna alias it to whatever you wanna alias it to. That's how you do it.