This course has been updated! We now recommend you take the ES6: The Right Parts course.
Transcript from the "Destructuring Arrays" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Aaron Frost: We're gonna move on to destructuring arrays now. So here's a basic example, okay? Pretty simple though, like I got an array 1 to 10. I want a variable called the first, second, and tenth
>> Aaron Frost: And I'm just gonna pull them out of this array, nums, okay? And I can log them and they're the right values.
[00:00:29] So if you wanna skip one, you just leave an empty comma in there. [COUGH] Again, new syntax you'll notice. We got curly braces on the left-hand side of an assignment expression. That's happened before, but not in this way. So before, you could be like, array sub 0 = 1.
[00:00:57] So you've had curly braces before but not like this, right? Not in the destructuring pattern. So there is kind of some new syntax to this and I think it's all fairly simple to grok. Do you guys think it's simple, right?
>> Off Camera 1: There's no, sorry, with the comma, is that really the way to do it, or is there a more aesthetically pleasing-
[00:01:25]
>> Aaron Frost: What, you think my code's ugly, what?
>> Group: [LAUGH]
>> Aaron Frost: You think my code's ugly?
>> Off Camera 1: Yeah.
>> Group: [LAUGH]
>> Aaron Frost: Yeah, no. No, no, no, this is how it works. This is how it is.
>> Off Camera 1: Okay.
>> Aaron Frost: Yeah, yeah, yeah.
>> Off Camera 1: And you also really have to count.
[00:01:36]
>> Aaron Frost: Yeah, I mean if you knew there was ten things and you knew you wanted the tenth one, and you didn't care about the middle ones, then yeah, that's what you'd do. So, does that look better than saying tenth = array sub 9? Probably not, but who knows.
[00:01:51] I don't know, you guys will know.
>> Off Camera 2: And there's no way to map with the object destructuring, you couldn't do like, indexed to variable name or anything? Like 0 to first, 1 to second.
>> Aaron Frost: I don't know, but I hope so. I don't think so though.
>> Off Camera 3: Is there a way to find out the last?
[00:02:09]
>> Off Camera 1: That's already mapping, right?
>> Aaron Frost: No, so I've kind of thrown this concept of patterns out to you guys. It's not like regular expression, like where it can kinda do a ton of things. You kinda need to know what you're looking for. When you're using these patterns, it's not like give me any random thing.
[00:02:34] Like in JavaScript, we don't just pass random objects into functions. The function coming in, you kinda know what it is, right? I know this is a user thing and it's gonna have an ID, and a name and stuff. So you kinda know what's coming in, and if you don't, then patterns isn't gonna solve your question.
[00:02:55] You need something else, maybe template strings with their DSL function might do it, but we're not gonna cover that today. Okay, so no. No, I hope so, someone said can I destructure the tenth thing to a different name? I mean, I am kind of doing that already, I'm pulling the array sub 0 out and putting it into a variable name first.
[00:03:19] So I am kind of naming them as I pull them out. So that's already happening. Yeah?
>> Off Camera 2: You just chose first, second, and tenth to make it easier which position it is?
>> Aaron Frost: Yeah, yeah, yeah, yeah.
>> Off Camera 2: Okay.
>> Aaron Frost: You don't actually, I mean the word first doesn't mean anything.
[00:03:31] It's arbitrary, right? It could be foo or bar. I just did first, second, and tenth just you guys would know this is the first one, the second one, and the tenth one. Just so the example might make, idiomatically, a little bit more sense as you look at it.
[00:03:45] So, good? Okay.
>> Aaron Frost: Okay, so something you can do. In the past, if we swapped variables, so given that I've got these two variables, a is 1, b is 2, in the past, I needed a temp variable. So go ahead and swap these things, right? That's how we would do it normally, right?
[00:04:12] So temp becomes a, a becomes b, b becomes temp, and then temp we don't care about anymore. We kinda throw it away. Not that we do this a lot besides homework assignments in school, but I mean if you needed to for work for whatever reason, you could. This is the new way, you put a and b in an array and then you pull a out and assign it to the b property and you pull b out and assign it to the a property.
[00:04:35] That make sense, what's going on there? So that's one way, I mean that's was one thing. I don't know if this is as practical as it looks cool for a demo, but it is a thing you could do. [COUGH] So, and again, you can couple this up inside the method signature.
[00:04:57] So if I have a function called doSomething and I'm gonna pass it an array of numbers, I could destructure first and second and then everything else can go into the others guy. That's pretty sweet, right? So you can just throw it all up in the method signature. Again, one thing that I love in the ES6 and I don't like about now is, we spend the first few lines pulling things apart and setting up the code for the rest of the method.
[00:05:29] And this kind of stuff helps you get it all up in the method signature. Someone just OMGeed on the stream. That's awesome. So here's nested. So, if I have this nested array, again, the variables 1, 3, and 6 are arbitrary. I'm only using them so you can see what variable I'm meaning to get.
[00:05:51] So I have a three-dimensional array right here. One, two, and then this array right here. And then I have another three-dimensional array with 3, 4, and then the third bit is 5, 6. So I wanna pull out one, skip two. I want to pull out the three into a variable called three, skip four, skip five, and grab six.
[00:06:18] That make sense? And you could do that all on a method signature. So pretty exciting. No one else is freaking out on the live stream, so that's good.
>> Aaron Frost: Pattern errors. So this, the first one, line one there, you could pull x out,
>> Aaron Frost: It's basically gonna throw the 3 away, it's only gonna pull out the index sub 0 and assign it to variable x.
[00:06:51] So x would equal 2 after this first line. On this second one, it's actually gonna pull the 4 out because arrays and objects, they're indexes are actually strings, right? So when I come to this array right here and I've got something in the 0 spot, it's gonna go look for that object sub 0, which, is it gonna find it?
[00:07:18] Yeah, because someone made a property called 0, which is a really smart thing to do in a map, right? Anyway, it would find it and it would assign that to 4. So, would this work? Unfortunately, that would work, yeah.
>> Group: [LAUGH]
>> Aaron Frost: And then if you try to pull x, y, and z out of it.
[00:07:38] If you try and pull three out and the array's only got two, you're gonna throw an error. Make sense?
>> Aaron Frost: Is that what you thought would happen, after what we talked about earlier? If you try and pull out z and it's not there. We all, kind of, it was like, it's not gonna be very forgiving unless I throw a question mark, right?
[00:08:00] Okay, so here's some refutable stuff. So that first line is the same exact thing we just looked at, where it was gonna throw an error. But we just refuted the whole entire pattern and now we're fine. So x is 1, y is 2, and z is undefined. Which is, hopefully, what you guys thought it was gonna do after my expert explanation of patterns.
[00:08:25] And then the second line is the same thing, except for instead of refuting all of it, you're just refuting the third variable.