ES6: The Right Parts Nested Array Destructuring

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

[00:00:03]
>> Kyle Simpson: If we can destructure a single level of arrays, we can obviously destructure nested arrays. So I could, it might be the case, that I would have in this position an array that had [4, 5, 6] in a nested array. Okay, I'll spread that out so it's a little easier to read.

[00:00:23] Okay, so now at the fourth position, we actually have an array with four, five, six, and. What is args gonna have in this particular case? Tell me what the structure of args would be.
>> Speaker 2: The array four, five, six
>> Kyle Simpson: No.
>> Speaker 2: An array where the first item is array 4,5,6-

[00:00:58]
>> Kyle Simpson: Exactly. args would be an array with one item in it. The item in that one position in args would be the array 4, 5, 6, okay? Do you follow that? All right, but what if I didn't want that? What if I didn't want that thing as one big array?

[00:01:18] What if I wanted 4, 5, and 6 individually addressable? Well, I can do array destructuring, right inside of my pattern. A nested array destructuring that says, make d the first one, I don't care about the second one, and make e the third one, for example. As long as I had those as locations that I could assign to.

[00:01:38] So now d is going to be the value 4 and e's going to be the value 6. Array destructuring uses position, just like regular arrays use position. When we talk about object destructuring, you'll see those use property names to be the mapping. But here there's an implicit mapping from zero to a, and from 1 to b.

[00:02:01] Because we're using the position, instead of the property name.
>> Kyle Simpson: So now you can start to see, you can start to visualize that if I had a really complex structure coming back from an API. I could have a nice little nested list of all the stuff that I cared about nesting down in array, inside of an object, inside of an array, inside or whatever.

[00:02:27] And then I'd have my two or three little variables that I cared about like first name and e-mail address and those the only ones I care about and the pattern becomes a self documentation. How many of you have ever done before, have some kind of API that you're consuming?

[00:02:42] And what you do is take a capture of that API structure and put it into your JS.comment. Because you need to document what the hell you're expecting to come back from this function call right now your pattern becomes your self document. You document what you're expecting by doing the destructuring pattern according to what you're expecting to get back.

[00:03:03] No need to duplicate it in js.comment, it's just right there in the structure, okay? That's what I meant when I said earlier that the destructuring becomes a thing that pays off bigger than just itself. Because now it starts to teach you something about the bigger aspect of what's going in coding.

[00:03:22] The time spent for you to learn how this works, pays off far beyond just that one line of code.
>> Kyle Simpson: Question about array and object? Yep, we're going to get to mixing them in just a little bit.
>> Speaker 3: A moment ago on line eleven you had ...args.
>> Kyle Simpson: Yep.

[00:03:43]
>> Speaker 3: And I don't think I ever got how that would come back as a single element within an array. Can you turn through that one again?
>> Kyle Simpson: Yep, let's go through this one more time. ...args is at the top level of our array destructuring pattern. Which is saying, any items that are left in my array should all be collected up into an array called arg.

[00:04:06] What is the only item that's left in our array? It's an array value. So there's going to be a single array holding that one value at position zero. Does that help?
>> Speaker 4: Oscar has a question about why do you need all those vars at line five?
>> Kyle Simpson: Only because I'm not putting the var right here.

[00:04:27] Remember I switched from doing declaration syntax to doing general assignments syntax. So if I go back to the declaration syntax, it's a little easier for us, okay.
>> Speaker 5: Not that I would encourage doing it but does it work if you don't have a var and you treat that as global's?

[00:04:46] Or will it not allow global assignments?
>> Kyle Simpson: Now it will allow global assignments, if you don't have a var there it will allow a global assignment. But then you have the question of, if you're in strict mode, which you should be in strict mode, then you're going to get an error.

[00:05:00] Cuz that's not allowed in strict mode.
>> Kyle Simpson: Okay so,
>> Kyle Simpson: We can either account for one of the values here, or we can destructure it. Or we can collect it with a ...args, but we can't do both. That will be different when we get to objects, it will be possible to double account for something with objects.

[00:05:35] And we'll get to that in a moment. But with the rains this position is either ...args. Or it's a variable called d, or it's a destructuring pattern that's broken down further. You gotta pick one of those three, okay?
>> Kyle Simpson: All right. Another thing before we move on to talking about objects is this idea that, I'm not sure I have the best way to illustrate this.

[00:06:23]
>> Kyle Simpson: What's happening here if we went back to that simple case, is we do have a declaration that's occurring. But we also have- and actually, this is going to be a lot simpler if I do it this way. So I'm going to go back to that case where I'm just doing destructuring and sign it without declaration.

[00:06:38] Just keep it simpler. What happening here is that there's an assignment expression happening and the end result of the assignment expression is itself of value. We already saw that earlier in one of our exercises where I assigned an arrow function to a very variable in the arrow function came back from the assignment.

[00:06:55] So here we have, what do you think, Would be the value of x?
>> Kyle Simpson: First off, do you think this is valid syntax, yes or no?
>> Kyle Simpson: And by that, I mean, convince yourself that it is valid syntax. Why is it valid syntax?
>> Kyle Simpson: Why is this, for example, not an array?

[00:07:41]
>> Speaker 6: Cuz it's still an assignment target.
>> Kyle Simpson: Cuz it's still on the left hand side of that assignment. So it's still in an assignment context. Now this assignment happens and some value comes back. Many people think that x will be the array of 1 and 2. Cuz they're thinking to themselves, what comes back from that assignment is only what I captured in my destructuring.

[00:08:08] But that is the wrong thinking, because that is thinking that bracket a, b is an array. Bracket a, b isn't an array, is it? It's a pattern for how to break down an array. So what do you think actually comes back from a destructuring assignment? The whole array, right?

[00:08:29] So x is actually gonna be the whole thing 1, 2, 3 with an array in 4,5,6. That's what comes back from the assignment, okay? The destructuring assignment is not creating a new sub array of just two items, it's breaking down the array according to a pattern. That's a subtle but really important processing signal.

[00:08:52]
>> Speaker 6: So in the same thing, you could switch s with ab destructuring and then you'd still get the same results, right? Cuz x would be the entirety of foo?
>> Kyle Simpson: If you did that,
>> Kyle Simpson: Now you're declarator with applied var a and b. And this line would be redundant.

[00:09:12] But x wouldn't exist, so you would need to declare x.
>> Speaker 6: [INAUDIBLE] But otherwise, same result, correct?
>> Kyle Simpson: Same result, okay? But I want to go back to the case where we don't have the declarator involved. I want to go back to this particular case. Because I just said, and that's what prompted me to go off on this little rabbit trail.

[00:09:35] I just said, well, you can either account for a position using a lexical name or using a ...gather or using a nested destructure. But you can do multiples. Actually you kind of can, because you can chain multiple destructuring patterns together, since every destructuring assignment returns the original full array.

[00:09:58] So I could say something like a, b, ...args, which is going to collect three and the array 4, 5, 6 in. And I could also have another destructuring.
>> Kyle Simpson: I'm going to start breaking these on multiple lines for readability. Okay, I could also another destructuring, which doesn't care about any of those first ones, but starts breaking down 4, 5, 6.

[00:10:32]
>> Kyle Simpson: Okay, let me try to use some whitespace here to help make this a little bit more readable.
>> Kyle Simpson: So let's go from the bottom to the top. First the foo function returns us an array. We destructure, assign a to the value 1, b to the value 2.

[00:10:59] And collect in the args the value 3 and the value 4, 5, 6. You with me? Then we say the whole array again is returned, and then we do another destructuring, which throws away the first three. And then it goes into that 4, 5, 6 and it says c should be the value 4 and d should be the value 5.

[00:11:25] So it is possible to chain multiple destructuring patterns together to accomplish that trick of doing accounting for the array in multiple ways.
>> Kyle Simpson: Any questions about array destructuring?
>> Speaker 7: When you do multiple levels like this do you have to have the, I'm assuming you need like var a, b outside of the-

[00:11:52]
>> Kyle Simpson: Yeah, we would have had to do all of that. The var is only gonna apply to the left most pattern. So, we could of done var here, and then had a var av.
>> Kyle Simpson: And args, or we could have done all of them. It's probably what I would have done, and had no declaratory attached.

[00:12:15]
>> Speaker 7: So requests for more concrete function in var names. I know why you do this, but I thought maybe you'd want to-
>> Kyle Simpson: I understand the request for more concrete names. I don't really want to get into the full reason why, but I just want to tell you it's not because I'm uncreative or lazy.

[00:12:33] There's a reason why I teach with the foo and the var. And there's a reason why I try to make your exercises not necessarily use too much of the foo in the var. So, we're doing both. I'm teaching the concepts with the simple stuff, and then we try to apply it with less weird stuff.

[00:12:50] That's not always the case, a few of the exercises have to use those but. What about args?
>> Speaker 7: Do you still think of using that here? Because to me it's like args might be used in a function.
>> Kyle Simpson: Yeah, maybe there's better name for that.
>> Speaker 7: And just, could you call it some letter?

[00:13:10]
>> Speaker 7: Whatever.
>> Kyle Simpson: Or vowels.
>> [INAUDIBLE]
>> Kyle Simpson: Yeah, I was just stuck in the mindset for the-
>> Speaker 7: Now I'm happier. [LAUGH]
>> Kyle Simpson: You're right.
>> Kyle Simpson: In particular, when we get to the end of this discussion of the destructuring, which we still got a little ways to go.

[00:13:34] But when we get to the end of the destructuring, the exercise that you do on destructuring is a more concrete example. It's not foo var example, okay?