Check out a free preview of the full JavaScript: From Fundamentals to Functional JS, v2 course:
The "ES6 Destructuring" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Bianca introduces destructing, a simplified method to extract multiple properties from an object.

Get Unlimited Access Now

Transcript from the "ES6 Destructuring" Lesson

[00:00:00]
>> So we're gonna talk about destructuring, which is an ES6. Two things that we need to think about when we're thinking about destructuring. And we're only gonna be talking about destructuring objects and arrays right now, we'll talk about the other kinds of destructuring later. We have the target and then we have the source, right?

[00:00:21] So, Keep that in mind because I'm gonna be using those words, but let me explain what destructuring is. Destructuring is a simplified way of defining variables and taking them outside of a object or an array. So in your code you may be doing a lot of like, cc var on equals this thing like first, someone tell me their first name.

[00:01:02]
>> Dan.
>> All right, what's a really cool last name?
>> Coelho.
>> How do you spell that?
>> C-O-E-L-H-O.
>> C-O-
>> L-H-O, after the.
>> Is that Brazilian or something? Yeah, that's cool. It is a cool last name, awesome. So doing something like this and then saying var first = obj.first.

[00:01:33] You can already see that I'm exhausted just typing this out. And then we'll say var last = obj.last. Who does this kind stuff in their code? Probably everyone all the time, unless you're already using destructuring, cuz that's what destructuring solves, is it saves us from repeating ourselves in this way.

[00:01:53] So we're gonna talk about variable declarations and assignment with destructuring. This is an example for an array. So we have an array here with a value true and false. And we are destructuring it so that first will equal true, and then second will equal false. What's the pattern here?

[00:02:26] So if I say, Oops, What's the pattern?
>> So the array-
>> Why is first true and why is second false? You're gonna say something?
>> Yeah, the array of consts is multiple objects, and they're all being assigned to those values other the related values on the other side [LAUGH].

[00:03:05]
>> Yeah, it's just an order, right, the first. And it has nothing to do with the naming here. I just named it first, because I thought that would be helpful, but in retrospect, maybe that makes it a little more confusing. We can name it whatever we wanted. And it's just gonna be in order, right?

[00:03:24] So imagine if this array was much longer, you could do a, b, c, d all the way to z, and then it would just be assigned in order. So that's a array destructuring for variable declaration. Why is the variable declaration? Because we're creating a variable right there. So we're creating the variable first, we're creating the variable second.

[00:03:43] And we're also using some other ES6 things that we haven't looked at yet, const and let. Are you guys using const and let in your code? Yeah, raise your hand if you are. Raise your hand if you kind of are but you sometimes forget and then you have to go back and select all and replace it.

[00:04:05] That's me, that's where I'm at. And it's just such faster to do it the old way and then I'm like, okay, well I don't want to look like I don't care cuz I do, so I'm gonna go back and fix it. Anyway, that's enough about my life. Let's talk about this.

[00:04:25] Is this clear how this is working? So we're creating variables on the left, that's the target, and the source is an array with values. It's a little confusing because there's two brackets on each side. We're not used to seeing brackets on each side, we're used to seeing brackets on the right of an assignment versus on both sides,

[00:04:46]
>> What if there's not equal on each side? So if there's true false true or something?
>> Yeah, let's try it. I like where we're going with this. So like this?
>> Yeah.
>> If you had to guess ,what do you think?
>> Syntax error.
>> Hm?
>> Syntax error.

[00:05:19] Undefined. So it's the same as probably doing something like this and saying equals array, At 3 array cuz of 0, 1, 2, 3 is undefined.
>> Does it successfully assign c and d though?
>> See how it still works? Like the behavior isn't different, and so c and d.

[00:05:56] So that's nice job it goes flexible like that, cool. We're good? How is this? How does this differ from the kind of variable declaration work that we were doing before? No, so exactly the same? You could say something obvious.
>> It's less verbose, it's more succinct, but it can make for really long sort of assignment lines given a large number of variables and maybe decreased readability.

[00:06:39]
>> Yeah, that's true. Cool, so we have the variable declarations and then we have the assignment. Assignment is just when the variables already exist, you can assign them. So up top, we're creating variables for the first time. Second one, we're assigning them to a variable that already exists.

[00:07:05] So look similar, except that we don't have the var, let, const in front. Yeah, someone ask me a question about this.
>> When do you use constant versus let?
>> I like this question. So you use const when you don't want that variable name to be reassigned to something.

[00:07:34] So const if you try to reassign it to a different value, there are some caveats here because of the what we were talking about with the objects, in reference, and stuff like that. But essentially if you try to reassign const, that's why I had to make new variable names each time.

[00:07:55] So up here I said const c, for example. So if I say c = 3, It gives you an error, you can't reassign it, which is nice. It's nice as long as that if you say, where are we at, f, if we say const e =. Right, Where are we?

[00:08:24] Say j. Okay, so we have j, when we say j.x = 3, that will work. Curious, right? Why am I that this way work and not the other way? My question was, how come when we reassigned c, we get an error, but when we reassign the value of x, which is a property on an object, it just lets us do it even though we're using constant both cases?

[00:09:00] So anyone have an idea?
>> I imagine constant doesn't apply to the attributes, it's a variable.
>> It's not that constant doesn't apply to the properties.
>> We're not changing j, we're just changing the property on j
>> Exactly. So-
>> So can you not add a new property on a j?

[00:09:24]
>> No, you can still add a new property-
>> You can still [INAUDIBLE]-
>> Yeah, so if we said j.y = 4, but what we can't do is we can't say j is now a different object.
>> Can you hold the properties constant?
>> What was that?
>> Can you hold the properties constant?

[00:09:46] So for instance, j.y.
>> If you use Object.freeze.
>> You're asking if you want it to so that you can't change the properties.
>> Right, yeah.
>> Yeah, so Object.freeze would do that for you.
>> So you'd have to wrap that object with all the properties in Object.freeze, and that only goes one layer deep.

[00:10:09] So if you have objects inside of objects-
>> How do you handle objects inside of objects?
>> I use this little module called Deep Freeze.
>> Okay. So it just-
>> So I think Substack Pro quote is just like a little recursive object on a freeze-
>> Okay.

[00:10:27]
>> Module.
>> Yeah, so useful, but just keep that in mind that it seems like it's doing a lot more than it is. And it can be a little bit tricky when we're using objects, and arrays, and functions, right, or non-primitive values. Primitive values will work as you expect.

[00:10:49]
>> Do you wanna demo Object.freeze cuz that might be useful?
>> Sure, I don't actually know what goes, what are the arguments?
>> I just put in an object like your x.
>> j?
>> Yeah.
>> That's it? Yeah, exactly.
>> All right, so-
>> Then I'll now just try to read, define.

[00:11:09]
>> What? Okay, so it doesn't give you an error but it doesn't let you change it.
>> Yeah, it doesn't throw a actual.
>> Yeah, the console is actually throwing an error.
>> It doesn't throw a syntax error.
>> Yeah, cool. So that's const, any other questions about this?

[00:11:38]
>> So when to use let?
>> Okay, yeah, perfect. So let allows you to reassign, and so it's similar var, right? So var you can reassign, great, but let has implications for its scope. So when we talk about scope later on today, you'll see that before let we didn't have a concept of block scope.

[00:12:03] Is anyone coming from a language? Someone said they were doing Ruby, right? Yeah, so you probably have run into block scope and you used block scope. It means a block is just curly brackets that is in an object, that's the way I think about it. So you can have curly brackets that's an object or you can have a curly brackets that's a block and they can be by function, right?

[00:12:26] And you can create a function block, it can be an if block, try catch block, stuff like that. So prior to let there was no scope to block scope, which means that and we'll go into more, that if a-
>> Like an if statement, there would be no scope the if statement [INAUDIBLE]-

[00:12:59]
>> Yeah, part of that it would just be the function scope, but I haven't explained scope yet. So-
>> Gotcha.
>> I'm trying to think of-
>> Maybe move on and revisit that.
>> Yeah, we can move on. Well, [CROSSTALK] just note that it has implications with scope and behaves differently.

[00:13:17] Yeah, cool, good question.
>> So it's basically a difference between global and local variable? Just-
>> It's a similar idea it's not the same. But it's yeah, it's about different where a variable reference has access to a value, right? So sometimes curly brackets will define that. Sometimes they don't, and let and var has something to do with that, has everything to do with that.

[00:13:47] So, cool. Great, destructuring. And for our objects, What's the pattern here? I can't do that. So anyone, how about, let's start with you.
>> Does the [INAUDIBLE] have the same name?
>> Yeah, so the property name and the target declarations have the same name, what did I do wrong?

[00:14:41] Those syntax error? Syntax error, first of the! Okay, So let's check out what first1 is undefined, that's not, has to match, giving it all away. What? Hm, first one has already been declared. Well, fine. Okay, we good. So first1, 0, second1, is 1. So who can tell me how this works?

[00:15:38] How about-
>> It's working because of the order similar to last time and then the matching names of the objects.
>> Yeah, so the names have to match in this case. So objects don't have an order, but it just happens to be in order in this example. But yeah, awesome.

[00:16:01] So same thing we're creating a variable, we're assigning a variable called first to the value of the first property, and we're assigning the value second to the value of the second property, yeah.
>> So the order it doesn't matter in it's declaration or assignment?
>> No.
>> Whenever you start thinking that objects have an order, or should have an order, you should be using an array.

[00:16:36] And if you're expecting an order from an object, sometimes it'll always come that way but that's a bad expectation cuz it's not guaranteed, although it sometimes it seems like it comes in order. Cool, so that's destructuring, it just makes getting values out of objects and arrays have less typing.

[00:17:04] And we like less typing as long as it's still readable. As long as we can understand what you're doing, awesome. Once you start to get out of that range, then that's when we start to have problems, and that's where some people are very dogmatic about it. Cool, questions about this?

[00:17:32]
>> I don't really follow here where are we creating an object and where are we creating properties?
>> Yeah, so that's the confusing thing, right? It's cuz syntax looks really similar. So the way that I think about it is, whenever you create a variable or you assign a variable, it's always gonna be on the left, right?

[00:17:51] You say var x equals y, you don't say y equals x var or something backwards like that. So just remember that. And, Yeah, and then the right hand side is gonna be the value just like in that example. And it also helps that for the variable declarations it says const, let, var, whichever one you're using in that case, and that gives you a hint.