JavaScript: The Recent Parts

Nested Object & 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 Object & 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 access a returned data structure's values when it is known that there are both objects and arrrays.

Preview
Close

Transcript from the "Nested Object & Array Destructuring" Lesson

[00:00:01]
>> Kyle Simpson: There's one other thing I wanna show you about object destructuring. It's kind of one of my favorite little nuanced quirks about it, which is with array destructuring, when we use the position to indicate the source it means we could only basically destructure a position once. Cuz there's no other way to say I'm getting it from that position multiple times, but when we're dealing with an object, we can actually list it multiple times.

[00:00:33]
So if I had an object that had an a, a b, and c and I were gonna destructure that object somewhere like a,b c. What if I wanted to do to destructure the b property multiple times and target it to different places? Well here, I'm saying, essentially, b:b but I can also say, b:w.

[00:01:15]
I can list the same source property as many times as I need to, and target it to different location. And this is particularly useful when b is a sub thing like a sub-object, because here I can get b the whole object and here I can destructure down in to b and get it's contents.

[00:01:46]
>> Kyle Simpson: So now I'm getting both the object that includes x2 and I am assigning x to a variable called w with the value 2.
>> Kyle Simpson: You can list these 2, 3, 4 times, you can list them in either order. I have on a number of occasions taken advantage of being able to get access to both the object and to destructure it in the same pattern.

[00:02:14]
Of course, if we can nest objects patterns inside of other object patterns, we can also nest arrays inside of object patterns. So if this was an array and we wanted to destructure the array, instead of having an object pattern here, what would we have?
>> Kyle Simpson: An array pattern where we send] w and y.

[00:02:46]
So w here is gonna be the value 500 and y here is gonna be the value 5,000. So I can have an array pattern inside of an object pattern. I can have an object pattern inside of an array pattern. I can have objects inside of objects inside of arrays inside of objects, any mixture there is appropriate.

[00:03:07]
Don't forget your defaults, which I always seem to forget.
>> Speaker 2: Is this called aliasing, or what is it called? When you're naming something that you're pulling out.
>> Kyle Simpson: I would call that, not aliasing, I would maybe call it a double destructuring. But it doesn't have an official name, as far as I'm aware.

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