JavaScript: The Recent Parts

Nested Array Destructuring

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Nested Array Destructuring" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

Kyle demonstrates how to to access a returned data structure's values when it is known that there are nested arrays.


Transcript from the "Nested Array Destructuring" Lesson

>> Kyle Simpson: Okay, back to the scenario where we are returning some things.
>> Kyle Simpson: What would happen, let's get rid of fourth for now. What would happen on the left-hand side, if in, let's say, this position here, I had an array that included some values, a subarray that included some values.

So I had 1, and then I had an array of 2 and 3, and then I had the number 4 here. If I wanted to imperatively grab that value out, how would I do so? Well, I would say first = tmp[0]. And then because I knew that I was gonna get an array here, I'd say something like var tmp2 = tmp[1].

And then I'd say var second = tmp2[0], and var third = tmp2[1], and then I'd say, var fourth, and back to tmp[2]. So first is gonna be the number 1, second is gonna be the number 2, third is gonna be the number 3, and fourth is gonna be the number 4.

>> Kyle Simpson: All right, so how would we do that with a destructuring pattern? It’s gonna actually be the same principle, is that if we have a position that is an array, then we need to break that thing down as a destructuring pattern. So in this position here, instead of having the target be a variable, we want the target to be another destructuring pattern.

So I'm going to make that destructuring pattern an array. And inside of that nest of destructuring pattern, that's where I'm gonna list second and third.
>> Kyle Simpson: What do you think would happen if I were to return this instead of that array? Oops, what if that wasn't an array?

What if that was undefined?
>> Student: Blow up? [LAUGH]
>> Kyle Simpson: What's that?
>> Student: It blow up, right?
>> Kyle Simpson: Yeah, what kind of blow up?
>> Student: Same reference, right?
>> Kyle Simpson: I'm gonna get a type error when I try to access bracket 0, position 0 of the undefined value. So how might I deal with that?

Again, I would say tmp2 = tmp[1] or empty array. And that way, second and third end up as these undefined or if they had default values. So how do I do that or empty array on my nested destructuring pattern? Well, just like this position can have a default, so can also this position have a default.

And in that case, we wanted to default to an empty array.
>> Kyle Simpson: That's how we give it a graceful fallback.
>> Kyle Simpson: Any questions about array destructuring?
>> Student: One moment here actually, is okay? I don't think that's likely actually because usually you will expect certain values, right? But I mean, there's no way to have if it's array or not array kind of thing.

>> Kyle Simpson: What line and what side are we talking-
>> Student: I'm talking about that array within array, the second and third.
>> Kyle Simpson: This one?
>> Student: Yeah, well, what if it's array [UNKNOWN[ it to like that, if it's not array take it as a whole. I mean, there's no way to do if, usually when I have a defined structure, right, if you are not sure if it's array-

>> Kyle Simpson: Are you saying, I'm not sure of the position, the element of that position is gonna be an array [INAUDIBLE]?
>> Student: Yeah, yeah, exactly.
>> Kyle Simpson: Yeah I know, the destructuring pattern says this is what it's gonna be, for this and that, you're gonna blow up.
>> Student: Yeah, it's kinda make sense because usually you don't have this kind of cases, usually when I have certain data structure.

>> Kyle Simpson: You would typically want to avoid a polymorphic structure.
>> Student: Yeah, that would be kinda weird thing anyway. [LAUGH]
>> Kyle Simpson: Yeah, I mean, those happen. But destructuring patterns are saying declaratively. This is what I'm expecting here, I'm expecting an array. And if I give back something that's a number, expect for bonkers things to happen.

>> Kyle Simpson: Yes?
>> Student2: For skipping values, could you use null instead of a blank space?
>> Kyle Simpson: I think the question is if I wanted to skip this position, when I do like a comma, is that the question?
>> Student2: Yeah.
>> Kyle Simpson: Yeah, no, the only way to skip is to not do anything.

Anything that's written here would be taken as you're trying to assign something to it. And null is not a valid left-hand side target. So the only way to not target something is to not have it there at all.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now