ES6: The Right Parts

ES6: The Right Parts Using the Gather & Spread Operators


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 "Using the Gather & Spread Operators" 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 highlights a few other use-cases for the gather & spread operators. He also briefly explains that only data types that have an iterator can be spread. Kyle will be explaining iterators later in the course.

Get Unlimited Access Now

Transcript from the "Using the Gather & Spread Operators" Lesson

>> [MUSIC]

>> Kyle Simpson: There are other places where the size parameter lists where this gather and spread can be used. So, another place is within the context of a reals. So, let's say I have x = (1,2,3) and y =( 4,5) and what I'd like is to define a z which includes the content Includes a value, plus the contents of x, plus the contents of y, plus another value.

[00:00:39] So I would do that by saying array of 0.concat, and I'd say xy. And then, another array with some other value like the value 6, for example. Anybody ever used to array concat before? So, now z would have 0, 1, 2, 3, 4, 5, 6 on it. So, any place where I find myself using the .apply and the .slice those are places where the dot, dot, dot helps but also places where I see myself doing .concat.

[00:01:07] That's another one of those smells like, maybe this is a place where dot, dot, dot can help me. So, this is the imperative form of doing that, the declarative form we start out again with the same array of var y = (4,5), and we have var z is equal to, and now we just make an array with the value in it.

[00:01:33] We spread out x, we spread out y and we add another value into it. So, arrays can be spread out in function calls like we did before where we were passing a value along to bar. They can also be spread out inside of array literal. So, we can use them inside of array literals as well, which is nice.

[00:01:56] So, putting those things together I can have a foo that, included this if I wanted to pass those all along. I could put those all together and then dot, dot, dot. So, I could make an array that are then spread back out or I don't even need to do that because those can all just be passed individual, all the same thing.

>> Kyle Simpson: So, re gathering and array. Spreading can be really useful for us, and depending on how you do this you can place interesting tricks which I'm setting you up now for the exercise that we're about to do. You can play some interesting tricks where for example, let's say.

>> Kyle Simpson: What I've done there is effectively throw away the first two from a, so it's kind of declaratively slicing off the first two from a leaving the remainder of a, and the remainder of b but all gathered together into a single. So, we can use different kind of tricks to do the declarative form of doing all that imperative slicing and concatenating and all the other stuff that we might do.

>> Speaker 2: There's a couple questions you should probably read them yourself. VJR is asking about the gather spread operator performance.
>> Kyle Simpson: To answer a question about performance. This is gonna be super annoying to some of you probably but I'm gonna tell you that most of your intuition about how you ask about performance, you're asking an invalid question, because the premise of most of those questions including this one, the underlying premise is Is it faster or slower than not doing it at all.

[00:04:07] And that's not an apples to apples comparison. What we really need to do is an apples to oranges. That's an apples to oranges, what we really need to do is an apples to apples comparison, which is to ask is it faster or slower for this dot, dot, dot thing to be used compared to all the slicing and can catthing that I might do.

[00:04:26] That's the real question that we might ask. Now, the answer to that question is it doesn't matter whether it's faster or not. What matters is that this is a form that that the compiler can recognize because it's a declarative form, which means that the engines have the opportunity to optimize it, or they don't have the opportunity to optimize the other form.

[00:04:50] That's the thing that matters. That's yet another benefit of using a declarative form, the compiler has the ability to see in the future. I don't know whether they do, but I don't care, because I'm not an engine internals person. But what I do know is that the engine has the ability to recognize that syntactically and say, I know what they're doing they're putting some stuff together and put in a super hyper optimized instruction to make that happen.

[00:05:17] They cannot do the same over here. The engine can't see what you're trying to do there upfront and make a super hyper optimized form of it. It might sound like I'm dodging the question, but what I'm really trying to get people to realize is that the value of the VA 6 is not about whether it is or is not more performing.

[00:05:40] In general in the long term, every declarative form will be at least as fast as the old version and probably much faster but whether it is today or not slightly slower or slightly faster is an unquestioned benefit in terms of code readability and that's where I think our focus should stay.

[00:05:59] Does that make sense?
>> Speaker 3: Question about how this works. What you have on the right side up there, so I think what's gonna happen is x and y are gonna be the first two elements of whichever of those arrays a and b got passed in, correct?
>> Kyle Simpson: If we made an a and a b, for example, a =(1,2,3) and b =( 4,5,6), x is gonna be 1, and y it's gonna be 2.

>> Speaker 3: And if x If array a only had one element then x would be the one element and then y would be the first element to b, okay.
>> Kyle Simpson: Yep, exactly.
>> Speaker 2: So, there was a response in terms of readability.
>> Kyle Simpson: Somebody trying to debate me on readability?

>> Speaker 2: Yeah, I think so. [LAUGH]
>> Kyle Simpson: I don't wanna get into debates on it. I'm presenting you all sides and it's up to you to decide what do you think about readability. Yes.
>> Speaker 2: Personal question, on the notion of the gatherer operator, what if a was a scalar.

>> Kyle Simpson: Say that again.
>> Speaker 2: What if a was a scalar?
>> Kyle Simpson: You can't use an dot, dot, dot operator against a value unless, and here's I'm gonna tell you something but I'm not gonna explain it until the end of the workshop. The end of the workshop or in a talk about iterators.

[00:07:26] The dot, dot, dot operator spreads out anything that has an iterator which is called an iterable. If a value is iterable it can be dot, dot, dot spread out. So, arrays by default are iterables because they have an iterator built into them as of ES 6, another thing that's a default iterable is a string.

[00:07:52] If I ask for the individual characters, if I wanted to get like a real array of the individual characters of that, the old school way would have been to say something like str.split. And now I get an array out of it but now we can just treat that string as an interval because it is and dot, dot, dot will actually spread it out.

[00:08:12] So, if I said something like dot, dot, dot string now that value is an array were each element is one of the characters from the string. So, any value that has an iterator, a primitive like the number value would not have an iterator by default. But, at the end of today we're gonna do an exercise where we can add iterators to our own custom values.