Instructor: Hey there, in this video I'm going
to show you a new operator in JavaScript,
and that's the spread operator.
So the new spread operator is a very convenient way
to expand elements of an array in places like
arguments and function calls.
So let me show you what I mean by expand elements.
Let's first create a simple function
which simply adds four values, let's say for ages.
So function addFourAges,
and I'm gonna call them a, b, c, and d,
and we simply return the sum
of all of these elements,
plus c and plus d.
All right, so let's now test if this actually works.
sum1 because I'm gonna use this multiple times,
so I'm gonna start with sum1.
So addFourAges and let's say
18, 30, 12, and 21.
Okay, then I'm gonna console.log this sum.
Okay, and it's 81.
Now imagine that we had these four numbers in an array
instead of, for example, four different variables.
So how would we pass that entire array into that function?
Let's start with ES5, and the first thing is, of course,
to create the ages array,
so 18, 30, 12, and 21.
Now remember that we have the bind, call, and apply methods.
And we used the bind and the call methods already,
but we didn't really use the apply method.
And remember that the apply method what it does
is to receive an array, and it calls the function
that the apply method is used on by using the elements
of the array as the arguments.
And so we're gonna make use of that here, okay.
So let me show you how that works.
So now it's sum2, and we say addFourAges,
and then we use the apply method.
And remember we have to specify the dis variable as well
such as in bind and call.
But we're not really interested in that
and so we can just say that it's null.
And then we pass ages into here.
And so once again what the apply method will do is to take
this array and then call this function here using
these elements of the array as the arguments,
which is exactly what we want to do here, right.
Because again this function does receive an array,
but instead it receives these four arguments here.
So let's now see if sum2 is also 81, which it should be.
sum2, and alright, so this worked.
But once again, there is a better way of doing this in ES6,
and it's as simple as this.
So now I'm gonna call it max3, and we now are going
to use the spread operator.
So addFourAges and the spread operator,
and then simply ages, and that's it.
And this what expanding means.
What this operator here does is to expand this array
into its components, so in this case 18, 30, 12, and 21.
So this here is now exactly the same as writing
18, 30, 21, and 21 such as we did here in this case.
This is what the spread operator does,
and now we're just gonna test it.
And this is of course not max3.
I don't know why I did that, so it's sum3.
And I'll check the 81 again, and it is.
So of course, this method here works exactly the same
but here it's more easy to write, more easy to read,
and also to memorize.
So instead of using this apply and null,
you can simply use the new spread operator to call
this function like this with these arguments.
And there are actually more use cases,
for example for joining arrays.
Imagine that we have two arrays,
one is for the Smith family.
Going back to our person examples here, so we have John,
Jane, and then Mark,
and we have an array for another family
let's say Miller and in here
we have Mary,
Bob, and Ann.
Now to join these two arrays, we can once again use
the spread operator, so now it's a bigFamily.
And so we say that we want to spread the familySmith
and the familyMiller.
So what this does is to expand this array
into the three single elements.
It basically takes them out of the array and puts them here.
It is the same, of course, with familyMiller.
And just to make sure that it works,
so here we have the array with all of the elements.
And we can also just put another element here in the middle,
for example, or somewhere else.
Let's say that there's a new element like a new child,
then we can, of course, put it right here like this,
and now here it is.
And yet another use case is that we can actually use
this on other structures so not just array but,
for example, also on a node list.
So remember the node list is what
the querySelectorAll returns.
So let's see an example of that.
I'm gonna select this heading here.
Okay, and then the boxes, and then I want to change
the text color of all these four elements
to let's say to purple.
So I'm gonna start with the heading,
so h = document.querySelector
and it's an h1 element.
Let me show it to you, so it's an h1 element.
I'm not gonna select it by class or by ID
but simply by its element name,
and so we don't need the point or the hash symbol here.
Okay and now we also want the boxes.
And we did this one before, so it's just like this.
And now we could, of course, change the text color
of this element and then loop through all of these here
and change the text colors as well.
But it's easier if you simply put all of them
in the same structure, right?
So we can use the spread operator here once again,
because remember they don't only work on arrays
but also other structures like node lists
which is what we have here.
So let's do that.
I'm gonna call it all and then we want h
and we want to spread to boxes.
Okay, because h is not a node list, it's simply a node
because it's a querySelector and not querySelectorAll.
But in here we have this node list and so we use
the spread operator to expand it, and then we have
the four elements all here as stored in this node list
in the all variable.
And so now all we need to do is to transform this node list
into an array and then we can loop through it
with the forEach method.
And as we learned in the last lecture
or one of the previous lectures, it's very easy
to convert a node list to an array, right.
So we simply write Array and then from,
which is the new method, and all, and this returns an array.
And so now on this we can use of course forEach method,
and we want the current element, and now I'm sure
that you're already getting used to this new syntax
that we've been using all time now,
which is the arrow function.
So the current is the argument to the function,
and now what we want to do is change the style
of each of the elements.
So cur.style.color, which is a CSS property for styling
text colors, and now I simply use the CSS color name purple.
And that's it, that's all we have to do change
all of these colors, so let's see and it works,
so they're all purple now.
Not very beautiful, but that's not what matters here.
So these were a couple of use cases for the new spread
operator and I hope that you see how useful it can be.
So now let's move on together.