JavaScript: The Recent Parts

Spread Operator & Declaring Destructured Arrays

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 "Spread Operator & Declaring Destructured Arrays" 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 introduces the spread operator to the example, and then goes on to explain how the example without destructuring differs in behavior to the example with destructuring.


Transcript from the "Spread Operator & Declaring Destructured Arrays" Lesson

>> Kyle Simpson: So notice that fourth here is an array with the values 4 and 5 in it. What would we expect the fourth variable to be over here on the left when I remove that 4 and 5, what would be the expecting, the variable fourth to hold on the left hand side?

We're taking an array and saying I want you to start slicing this array at this position. And this array doesn't have a position there, it doesn't have any values, but what is slice always gonna return to us in that case?
>> Kyle Simpson: An empty array, right? That's what we would expect is, there's nothing there, so it's just an empty array.

And the exact same thing is true over here, if there's nothing in that position, at a minimum, the gather operator, the rest operator, it gives us an empty array, which is very convenient. Instead of having to deal with, it could be undefined, or null, or something like that.

>> Kyle Simpson: The gather syntax, by the way, the rest syntax, it has to show up at the end of the pattern. You can't gather in the middle and then have other things listed after it, it has to be at the very end of the pattern. Because it's getting, it's gathering everything else up, it's gathering the rest of the values.

>> Kyle Simpson: Little nuance here that I've been hand-waving over but it seems like a good time for me to call out. Can any of you spot the difference between the left hand side and the right hand side, functionally, behaviorally? There is a difference here.
>> Student: In terms of the amount of declaration that's happening or the sequence of the declaration?

>> Kyle Simpson: No, I mean the outcome of these two programs. There's a difference in outcome between these two programs.
>> Student2: The temp is changed.
>> Kyle Simpson: There's a temp on the left hand side but there is no temp at all on the right hand side. No, and I think you were trying to indicate the slice is-

>> Student2: [INAUDIBLE] slice [INAUDIBLE].
>> Kyle Simpson: It doesn't mutate it.
>> Student2: Okay, it doesn't mutate it, okay.
>> Kyle Simpson: Sub-slice of the array, but the big difference is, there's a tmp over here and there's no tmp on this side.
>> Kyle Simpson: And it's not a huge difference actually. But it is an important difference because it speaks to the idea that when you destructure, you're just sort of ephemerally saying, I want this structure to exist for this brief period of time and then break it out into pieces and then throw away the big structure.

Which is often what you want, but it might be the case that you'd actually like to have a reference to the whole structure as well. And the way that we would do that on this side is to get tmp equal to data and then to break it down, and that's exactly the same thing that we would do over here.

We would say get me a tmp,
>> Kyle Simpson: So I'm saying vartmp equals data, and then have this thing equal to that value, so this pattern is going to break down the tmp. So if I already had a vartmp that was declared, then this thing is going to happen, I'm gonna get tmp assign to the array, and then that array is gonna get destructured by this pattern.

>> Kyle Simpson: So if you need to get access to both the value and its destructured parts, you just simply chain an equals together. It is common for in my experience to put the reference to it, over here on the right next to where the value is, and then have the destructuring pattern to the left of it.

But technically you can actually do it in the other order, we'll see that in a little bit.

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