All language subtitles for 007 The Spread & Rest Operator_en

We learned a lot about classes and arrow functions.

Let's now turn our heads towards new operators we'll be able to use in the future of javascript and we

already can use today in our React project, the Spread and the Rest operators.

Actually it's only one operator three dots.

Yes this may look strange but the operator is just three dots.

Now if we call it spread or rest depends on where we use it, the spread operator is used to split up

array elements or object properties.

So we spread up an array or object.

For example if we have an old array and we want to add all the elements from that old array to a new

array and additionally add a 1 and a 2 element this first syntax would be what we use, three dots in

front of old array will simply pull out all the elements and add it to the new array which we created

with square brackets.

And of course then we can add more elements to it.

So if we just use the normal syntax with the square brackets to create an array, the same for the object.

We create a new object with curly braces with the new prop but then we also have dot dot dot.

Old object to pull out all the properties of the old object and their values and add them as key value

pairs to the new object as a side note if the old object.

Also had a new property.

It would be overwtitten by a new prop 5 here.

So our own property takes precedence. This is the spread operator.

Now the rest operator is the same operator but used differently, here it's used to merge a list of function

arguments into an array.

And this shows us where we use it.

We use it in a function argument list.

Here is an example.

sortArgs receives an unlimited amount of arguments.

So one argument, two, three or whatever, with dot dot dot we only write one argument args but we may actually

receive more than one and they will all be merged together into an array.

So then we can apply array methods to our argument list or do whatever we want to do with our conveniently

stored arguments.

Let's have a look at both used as such on jsbin then.

So let's start with the spread operator I'll create an array of numbers.

So one, two, three add as many as you want.

Now I want to create a new array newNumbers and as you saw spread is now simply used by adding three

dots.

Then the old array numbers and then potentially you don't have to do that.

New numbers like 4 and again that is optional.

With that if I now console log.

newNumbers here.

And I had run we get one two three four the old array with all its elements and the new element.

And actually we don't add the old element.

If we were to do that without the dots it would be included as one element inside the new element.

It really pulled out the old elements as you can clearly see.

So that's the spread operator and you will see me use this throughout this course a couple of times on

both arrays and objects to for example conveniently copy arrays or add properties to an object whilst

safely copying that old object.

Again I will obviously also always mention why I'm using that operator when I do in the course.

Just be aware that it exists.

Let's now see the same for objects I'll create a person object here where I have a name.

Let's say Max and now I will have a newPerson object which is a javascript object a new one where I

First of all use the spread operator on person to copy all the property value pairs of the old object

and potentionally and that's always optional.

Add a new property.

And now if I console log newPerson you may ignore this error which is thrown by jsbin, the syntax

will be supported in our course project.

If we do this you see object is printed here with name Max at age 28.

So it's taking the old person and distributing it into the new person that's the spread operator.

Now the rest operator which is used less often though is used in a function and you could of course

also use ES6 arrow function.

So there we could have a filter function whatever you want to name it and we get a couple of args and

you don't have to use args here you can also name this a or whatever you want but you have to use the three dots

in front of it.

So then there you can simply return.

We could use the inline syntax here to write it all in one line without you return keyword here I'll

use return.

You could return args and then let's say we call the built-in filter method which is available on arrays

and keep in mind the dots here are used as a rest operator and that merges the arguments into an array.

So we can use array methods like filter, filter will execute a function on every element in the passed in

array.

So here we would get our element and then we could use the inline arrow function to simply say return

true or false.

Which filter expects if the element is equal to 1.

Now that might be a lot of syntax you don't know.

Three equals signs checks for type and value equality so that el also has to be a number.

And this is just an arrow function that we pass to the built-in filter method.

So this has nothing to do with rest or spread.

We have that we could call filter and let's console log to see something console log filter.

So our filter function here on let's say 1 2 3 and actually we should only log 1 here as an array

though because we filtered this array which is created with the rest operator with the three dots here.

So that's Rest and spread again spread is the usage of the three dots you will see more often in this

course.