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.

Preview
Close

Transcript from the "Nested Array Destructuring" Lesson

[00:00:00]
>> 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.

[00:00:26]
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].

[00:00:59]
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.

[00:01:21]
>> 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.

[00:01:51]
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?

[00:02:18]
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?

[00:02:45]
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.

[00:03:17]
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.

[00:03:49]
>> 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-

[00:04:07]
>> 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.

[00:04:22]
>> 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.

[00:04:43]
>> 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.

[00:04:59]
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