ES6: The Right Parts

ES6: The Right Parts Gather & Spread Operators Part 1


This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.

Check out a free preview of the full ES6: The Right Parts course:
The "Gather & Spread Operators Part 1" Lesson is part of the full, ES6: The Right Parts course featured in this preview video. Here's what you'd learn in this lesson:

The gather & spread operators are denoted by three dots (…). How it is used depends on the context. In an assignment context, it’s the gather operator. In a value-list context, it’s the spread operator.

Get Unlimited Access Now

Transcript from the "Gather & Spread Operators Part 1" Lesson

>> [MUSIC]

>> Kyle Simpson: The next thing that we want to talk about is this notion. We might have had a function that looked like this before. We wanted to get a list, an array, of all the arguments that have been passed into foo, because we're going to treat, here's a fancier, we're gonna treat foo as a variatic function.

[00:00:22] Simply means that we can pass zero, one, 500 and maybe our function actually has different behavior depending on how many arguments we pass in, right? So, in the past the way that we wanted to get that is we knew there was an arguments object, but it was kind of annoying that that was an object that was an array-like, but not a real array because it didn't have stuff like slice and pop on it and things like that.

[00:00:47] So let's say that there was a case where we wanted to get the arguments array and add something on to the beginning of it, we would have to turn it into a real array. So we would say something like var args is equal to. And then we did this crazy nightmare of stuff where we borrowed the slice call from a real array, or from the array prototype, but called it in the context of the arguments object.

[00:01:11] That made us a real array, okay? You've probably seen that kind of code before. Now once we have a real array we could do something like unshift to push on the value 42 as the first argument in the list, alright? And then, let's say we wanted to do something like pass all of those values along to another function call, as individual arguments to another function call.

[00:01:41] So, we would like to be able to just do this args thing. But unfortunately, we don't wanna pass the whole array, we want to pass them each as individual arguments, so we had to do apply. And we don't care about that this bindings, so we have to do something stupid like null, or undefined, or something like that for the this and then we give it the args array that we wanna pass along.

>> Kyle Simpson: Does this code look roughly familiar? Have you seen code like this before? Okay.
>> Kyle Simpson: So that's the imperative form of doing something where we pull in some arguments, add something on, pass them along. Now we want to talk about an imperative form. I mean a declarative form, okay?

[00:02:25] There is a new operator added to JavaScript, and its name is a little confusing because this operator does two different things depending on the context it's used in. So it has a different name in different locations. So, same operator we're gonna give it a different name. So, it is also, it is now possible for us, in the parameter list, to gather up all of the parameters that are not, I mean all of the arguments that are not already accounted for by named parameters, to gather all of the unaccounted for arguments together into a real array.

[00:02:59] And the way we do that is with the ...operator, and then we give it a name like, for example, args. I'm putting spaces there just for readability, but the spaces aren't required. That does the exact same work as that whole crappy other line over there in line two does, it gathers all those arguments together.

[00:03:19] Okay. This is often referred to as the rest parameter, or the rest operator rather. I don't like to call it the rest operator because rest is, in this sense, a noun and not a verb, and when we look at the other usage of this operator it will be a verb.

[00:03:36] So I like to use the verb form, so I like to call this the gather operator. Cuz it gathers arguments together. Okay? So, now that we have an array we can do an unshift withthe value 42. It turns out we're not actually going to even need that, but we will come back to that in just a moment.

[00:04:02] And now that we have a function call, we don't need to use apply anymore because now we can use the ...operator to spread an array out. So, I can say .arg ...args, it will spread the array out into its individual constituent parts as individual arguments to this function call.

>> Kyle Simpson: So you can see two different usages of the same operator but they're symmetric. One is gathering them together into an array, and another one is splitting the array apart, spreading the array apart out into individual values. How do we know which one is being used? Well you have to understand something about the context that it's being used in.

[00:04:47] The parameter list, though you may not have been used to thinking about this, a parameter list is what we would call an assignment context. The reason for that is that parameters are the named things in the function declaration. Arguments are the thing at the call site that we pass in.

[00:05:02] Under the covers, JavaScript does an assignment from the argument value to the parameter name. So the parameter list is called an assignment context. Exactly the same as bar X equals two as an assignment context, got it? When a ...operator is used in an assignment context, it gathers.
>> Kyle Simpson: When it's not used in an assignment context, but rather in a list context, a value list context like this one, it spreads.

[00:05:36] Okay? So you just have to understand what context it's being used in as to whether or not to call it the gather operator or to call it the spread operator. But you see why I call, I use gather and spread because those are nice opposites of each other, in terms of verb usage.