ES6: The Right Parts

ES6: The Right Parts Gather & Spread Operators Part 2


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 2" 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:

Kyle continues explaining the gather & spread operators by showing how they could be used with an existing list of parameters or values. He also answers a few audience questions about assigning default values to a gather operator or using it as a default value.

Get Unlimited Access Now

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

>> [MUSIC]

>> Kyle Simpson: But here's something cool because this is just a regular arguments list, we don't actually need to add that on to the array, we can just literally put the value 42 right there. We don't even need to modify the array, just say 42, dot dot dot args.
>> Kyle Simpson: I think that's a whole lot more declarative form as opposed to the imperative form over on the left.

[00:00:28] What we mean by the difference between declarative and imperative is this specifically, don't miss this. The difference between declarative and imperative is that imperative includes all of the implementation details of how. But most of those implementation details of how are not the things that the programmer should have to think about at that moment.

[00:00:47] So what we're doing is taking those details, abstracting them away into the engine inside of a feature so that what's left is the stuff that we should focus on. How many of you have heard before that the purpose of abstraction is to hide details, anybody heard that? That's probably how you would describe and I don't agree.

[00:01:09] Abstraction is not about hiding things. If you go back to the original definition of when the idea of abstraction was created, what were they trying to do with abstraction, they're not trying to hide stuff, they're not trying to create black boxes. You know what the purpose of abstraction is?

[00:01:23] Focus. The purpose of abstraction is to take two things that are interwoven together, and by interwoven together, it makes it hard to reason about either one of them. To separate the two, so that each one can be individually focused on, depending on what you need to focus on.

[00:01:44] So what we're doing is we're taking the thing that's gonna happen and the how to do it and teasing those two apart with a declarative form. Meaning that we can focus on the stuff that actually matters. In this case, what matters is that we want to add 42 on as the first argument and pass everything else along.

[00:02:01] That's the thing that matters. All the other code over there was just a distraction to get us to that point. So the declarative form here helps us to make more reasonable, understandable and readable code. It removes the details that distract the reader. Are you following me? And that's the narrative we wanna be looking for, every feature you look at an ES6.

[00:02:24] There's a thousand other features in the language that I'm not talking about today. Whatever choice you use of features or whatever, I want you to evaluate it based upon that. Is it helping me to communicate more clearly? Sometimes that will be that we create shorter code like we're doing here.

[00:02:40] But there will be times when the most communicative ES6 code is actually longer than the other one. So it's not about saving characters, it's about communicating more clearly.
>> Speaker 2: So you said args is a keyword here, it's a new keyword?
>> Kyle Simpson: No, no, no. The dot dot dot is an operator.

[00:02:58] Here, I can call this whatever I want. I can call it foo, I mean, bar if I want to, for example. Doesn't matter what.
>> Speaker 2: Okay, yeah, thanks.
>> Kyle Simpson: I have to call it [INAUDIBLE] I guess. All right. Yeah, I just by my convention, I use args, some people used to use rest cuz they like the rest operator usage.

[00:03:20] The dot dot dot gathers up everything that's not already accounted for, so if we had already accounted for say one of the arguments with the named parameter, dot dot dot args is gonna be everything else. Not including the thing that's accounted for by x. Okay? So this would have the effect of essentially throwing away whatever the first thing was that we passed in.

[00:03:46] And replacing it with 42. You see how I did that? If I did the equivalent, I'm not gonna waste your time on it but if I did the equivalent, I need to do a slice and slice off the first one and then pass in a new one or whatever.

[00:03:57] It's just it's syntactically done for us. Throwing away the parameter x that we don't care about. Question was can we have default params with gather? So you can do defaults here, of course, you can do defaults there all you want. I think it makes complete sense that we ought to be able to default that args array to something like for example, 1, 2, 3.

[00:04:23] It's not included in the language, and when I asked them, can we add that, they're like you're a bad person for asking that so stop asking. Which is why I don't participate in the spec close anymore cuz every time I come to them with an idea, they shoot me down.

[00:04:36] So I don't know why we can't have default values on the.
>> Speaker 3: The question was a little bit different.
>> Kyle Simpson: Was it? Sorry.
>> Speaker 3: They're asking if the dot dot args can be used as a default value.
>> Kyle Simpson: No, sorry no, so the question was can I say something like y = dot dot dot args?

[00:04:55] So you have to think about it in that particular case. We are back to a value semantic, not an assignment semantic, so we're back on the value side of the equation. So dot dot dot would actually be spreading out the array. So technically, you could do something like dot dot dot x.

[00:05:14] No, that won't work, never mind, you can't spread out in a non-comma list, forget I said that. So no, you can't use it like that. Sorry.
>> Kyle Simpson: Okay.
>> Speaker 4: I have a question.
>> Kyle Simpson: Yes, sorry?
>> Speaker 4: Can you spread the keyword arguments or does it have to be an actual array?

>> Kyle Simpson: There is a proposed feature. So arguments is an object, and we can't use the dot dot dot operator by default against regular objects right now. There is a proposal that is now, I think, stage two. To add the dot dot dot operator, both gathering and spreading to objects, as well.

[00:05:58] It's not in the spec yet, but it's working its way through the process. So sometime over the next year or whatever. We'll probably see that land.
>> Speaker 5: So they would be array-like objects? Or objects in general. I guess I don't know how that would work with a plain object structure?

>> Kyle Simpson: Well, depends on which line of code you're talking about. If you're talking about line one or talking about line two.
>> Speaker 5: I'm talking about spreads, the line two.
>> Kyle Simpson: So, if I had the ability to spread and I did this, there's no more object at all. What's getting passed along is the individual values in the arguments object.

>> Speaker 5: My question was, can you apply the spread operator to arguments? Because arguments isn't an array, it's a array-like object.
>> Kyle Simpson: Well not yet, but when this lands in a year, or whatever however long it takes to finish, you will be able to do dot dot dot argument.

>> Speaker 5: So I must have missed it, is it already approved or is it still-
>> Kyle Simpson: It's a stage two.
>> Speaker 5: Okay.
>> Kyle Simpson: First four stages, actually five stages and it's at stage two, so it's working its way through. There's I'd say, a better than 50% chance that will land but we don't know when.

>> Kyle Simpson: One of the complications there just because you're asking. One of the complications there, spreading out an object is not such a big deal cuz you can think conceptually or just loop over all of its properties, but then there's questions like, does that include only owned properties? Or what about properties that are delegated in the prototype, should it, by default, give all of them?

[00:07:31] But really the gather is the question with objects, what does it mean to gather a bunch of values in, how do we figure out what the property names ought to be when we gather into an object? So there's some weirdness that they're trying to work out but I think it's got a pretty decent chance of eventually landing.