ES6 Tutorial - Rest and spread operators
   Jan. 2nd,2018
   Ismail Nassor Mbarack

From time to time we wanted to pass unlimited values into the function without having to worry how many arguments this function can take.In ES5 we used the arguments keyword where we used to iterate through its array length likewise in ES6 we do almost the same thing but with the use of the rest operator.We convert whatever is passed into the function into an array but in a more advanced way.Take a look at the following example.

 

function addition(...myNums) {
    console.log(myNums)
}

addition(1,2,3,4,5,6);

 

Just like you would've expected in PHP or Java this is exactly what this operator does.Takes any number of arguments passed into the function and convert them into an array, then we could use that array to do anything we want, we could mad over it, etc.To sum up the numbers above we could use the reduce method on the array which mainly reduces all the elements in the array into a single element.Take a look at the following example

 

function addition(...myNums) {
    return myNums.reduce((prev,current)=> prev+current );
    //similar to,remember that the return statement and curly
    //braces could be omitted for a single statement execution
    /*return myNums.reduce((prev,current)=>{
        return prev+current;
    })*/
}

console.log(addition(1,2,3,4,5,6));

 

Next, let's take a look at the spread operator.The spread operator does exactly the same as the rest operator BUT in the opposite.It converts array elements into single values and injects them into the function.Let's take a look at the following example.

 

function multiplication(a,b,c) {
    return a * b * c;
}

let numbers = [2,7,4];

console.log(multiplication(...numbers));

 

See what happened above, the spread operator took the numbers array and converted it into single parameters a,b and c then injected them into the multiplication functions.So, all in all, we can say that the rest and spread operators are equal and opposite to each other.

Something very important to note in the rest operator is that if you're passing multiple arguments into the function, the rest operator MUST be put at the very end.Take a look at the following example

 

function multipleArgs(a,b,c,...others) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(others);
}

multipleArgs(2,4,'Nassor','Ismail','Mike','John',45,7,89,'Linux');

 

 

As the name describes it, the rest operator, since the function accepts three different arguments a,b and c, it'll take the first three injected values and put them into the arguments a,b and c, then it will take  the rest of the values and put them in the other array as seen in the screenshot above.And of course, putting any arguments after the rest operator would lead into a syntax error.

See, Babel couldn't even compile the code above.There's a couple of more things to pay attention to but I believe that you'll get them on the go.

....Happy New Year 2018....