Understanding the Rest Operator in Javascript

The rest parameter syntax or Rest Operator in JavaScript allows us to handle the infinite number of parameters as an array. Basically, It improved the way of handling parameters of the function.

Basic Example

function fun(...arr){ 
    let sum = 0; 
    for(let i of arr){ 
        sum+=i; 
    } 
    return sum; 
} 
console.log(fun(1,2)); //3 
console.log(fun(1,2,3)); //6 
console.log(fun(1,2,3,4,5)); //15  

In the above example of the Rest Operator in JavaScript, we created the function called fun and receiving the arr parameter using the rest parameter. Now It doesn’t matter how many parameters you will pass in fun function it will grab all of them as an array.

Syntax

function f(a, b, ...theArgs) {
  // ...
}

Note: A function’s last parameter can be prefixed with … which will cause all remaining (user supplied) arguments to be placed within a “standard” javascript array. Only the last parameter can be a “rest parameter”.

source

For example:

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

Destructuring rest parameters

Yes, you can use destructuring with the rest parameter. But, Arrays only (though objects will soon be supported). It means you can unpack the data of the rest parameter into distinct variables.

To read more about Destructuring see this JavaScript Destructuring ES6: The Complete Guide

Back to the point, I’ll show how you can destructure the rest parameter in the below example:

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

Well, you can use destructuring with the rest parameter and it will work but, As far as is know, I don’t see any use-case of it, It just makes the code little confusing.

What if you receive the rest parameter but did not pass it any value?

For example below:

function myFun(...allArgs) {
  console.log("allArgs", allArgs); 
}
myFun(); // allArgs []

Nothing to worry about it as if you did not pass any value to it, It will be an empty array.

You can also check the length of your parameters.

Checking the length of parameters in the example below:

function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

For now, that’s all. Thanks for reading. Share if you find helpful.