JS.Next: ES6 / ES2015 Spread Operator
This course has been updated! We now recommend you take the ES6: The Right Parts course.
Transcript from the "Spread Operator" Lesson
>> Aaron Frost: All right, spread operators. Quick lesson. These are not hard to grok. You guys can play around with them, we're going to take a few minute break when we're done. They're simple. So, we have this array right? Apparently, the way we pull arrays apart is kinda manual but, this is kinda the the impetus of what it does.
[00:00:32] If you log nums it logs in the array of nums. If you log dot dot dot nums, it spreads the array out, into its individual pieces, and then we'll log them in individually, does that makes sense? So in place. It's gonna kind of replace this with all the individual bits from here.
[00:00:51] So rather than logging in and an array with one two three. You get the actual pieces individually.
>> Speaker 2: Like easier than calling reply or something?
>> Aaron Frost: Apply and [CROSSTALK]
>> Speaker 2: Like .apply and.
>> Aaron Frost: I see what you're saying. Yeah you totally could use this with call instead of an apply, right?
[00:01:09] There's some other use cases as well, though. It's like normally in the past when we've got this array, like I've got an array of things and I need to pull it apart, I manually go pull that guy out and then I'm going to pull that guy out. And I pass him in right.
[00:01:27] But now with this thing, I can just throw them all in there. And this guy only cares about two of them, so it's going to spread out all three of them. But it's going to ignore the third one right? And you basically get the exact same functionality. That's kind of a comparison of how we used to do it versus how we would do it now.
[00:01:47] So some examples of what you might do with spreading. You can on the fly you can construct some new arrays. So check out that syntax there. I've got a syntax with nums, and a syntax with letters and I make a new array and I just spread out the numbers of the letters into it and then I end up with this nori over here.
[00:02:12] It's got everything there. So that's like an example of something you could do.
>> Aaron Frost: It can be, you can spread out the return value from function call so like if I had this get nums or then I don't know that thing like had to go to the local storage and get it or whatever.
[00:02:34] And then it returns that I could, by prefixing it with a dot dot dot, it looks like a wonky method call, but really what I'm doing is I'm spreading out the result of that method call. So you could do that, that's one way you can use it. And I spread it out into a new array that I assigned to b, so, there's that it's kind of simple I mean I don't know what all to say.
[00:03:02] Any questions about it? Yeah Tony is saying it's like Ruby or CoffeeScript, totally just like that, that's where it came from. When we talked about the tc39 adopting de facto standards. This is a typical defacto standard that other languages were doing, people liked, we adopted it or. We, Ecma scripts, adopted it for all fort its interface for its API, so.
>> Speaker 3: Could you use it in combination with destructuring assignment?
>> Aaron Frost: Hold on, totally you could totally do that. Can we do that when we do destructuring. Destructuring is a big part, so let's cover that when we get to destructuring, is that cool?
>> Speaker 3: Yeah.
>> Aaron Frost: So everyone take five minutes try out some of this stuff see if you can get it to work or break.
[00:03:55] See what works better. See what works worse. Tried in the Traceur Repl. I think it works in Firefox. Yeah, you're good in Firefox and you're good in W.K.
>> Aaron Frost: Web kit? Yeah, well. I don't think that's true. But whatever. Anyway, yeah, try it out. EJS has it as well.
[00:04:27] EJS has implemented the most features. If you look at this table, you look at who's got the most, well sorry Firefox has the most. EJS has the second most. And EJS is a bit more cross platform, so yeah. Anyway traces are a lot of as well. A lot of these ones with high council they have all these ones at the bottom that are just like, they extended the number prototype for the math prototype and they got 30 things, kind of easy.
[00:05:01] They're very prototype stuff as well. So, we're just going to try this live if anyone has any questions, let me know.