JavaScript: Rest And Spread

Rest Parameter

Functions accept parameters, we provide parameters to function like an input to the function. Parameters are used in function statement to generate a result, so they are important. When we declare function definition we specify the number of parameters needed for the function to perform the specific task. During function call we pass the arguments which will replace the arguments in the function definition, the number of parameters is equal to the number of arguments specified during the function definition. If we pass more arguments than the required, there will be no error, JavaScript engine will ignore excess parameters. So if a situation comes where we are unaware about the number of parameter that the user will provide during the call and we need all those arguments. Rest operator help us in this situation, a variable prefixed with ... is called a rest parameter. It tells JavaScript engine that it will accept any excess parameters passed to the function it contain.

Rest parameter in a function help the function to accept any number of parameters. The rest parameter is an array (Yes, real array) and its elements are parameters passed to it. There should be only one rest parameter and it should be placed last in the parameter list.

function addNum(a,b){
    console.log(a+b);
}
addNum(1,2,3,4,5);              //3

function acceptNumbers(a,b, ...c){
    let sum = a + b;
    for (let num of c){
        sum+=num;
    } 
    console.log(sum);
}

acceptNumbers(1,2,3,4,5,6,7);    //28

In the above code, function addNum accept two arguments a and b, during function all we pass 5 parameters. The output of console.log show output as 3, which means only two parameters are accepted by the function and remaining are ignored. Now look at the function acceptNumbers which has three arguments a, b and c; c is rest parameter. During function call seven parameters were passed to the function. When we look at the output of the console.log we can understand that all the passed parameters are accepted by the function. To be more clear lets see what is passed to the "c" argument.

function acceptNumbers(a,b, ...c){
   ........
   ........
   console.log(a, b, c)      // 1 2 [3, 4, 5, 6, 7]
}

acceptNumbers(1,2,3,4,5,6,7);

Concentrate on the output of console.log(a,b,c) statement, we can see that the argument contain first parameter 1, b contain second parameter 2 and c argument contain parameters passed to it as array ([3,4,5,6,7]).

restParameter.length gives the length of the rest parameter

Spread Syntax

Spread syntax is used to expand an array, string or an object. Spread syntax use the same "..." used in the rest parameter. Rest parameter gathers multiple items to a variable as an array, spread syntax spreads the elements inside an array( or string, object etc.).

let name = "kiran raj";
console.log(...name);     //k i r a n   r a j

syntax : function myFun(...args){ ... }

Let me explain it with an example.

function addNum(a,b,c){
    console.log(a+b+c);
    console.log(a,b,c);
}
let arr = [10,20,30];
addNum(...arr);          // 60
                         // 10 20 30

addNum(arr);             // 10,20,30undefinedundefined
                         // [10, 20, 30] undefined undefined

In the above code we declare a function that accept three arguments which will return their sum. Then we declare an arr with three elements, this arr is passed to the function using "...", we spread the array elements so that each parameter get a array element. If we pass the arr without spread, the arr will be assigned to parameter a and b and c will be undefined. Lets look at another example.

function findMax(arr1,arr2){
    let max1 = Math.max(...arr1, ...arr2);
    console.log(`Max element is ${max1}`) 
}
let arr2 =[20,40,100,30,60,80];
arr1 = [23,56,90,87,101,45];
findMax(arr1, arr2);           //Max element is 101