Understanding the Rest Operator in Javascript

JavaScript , , 2 Comments

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.

Spread the love
  • 1
    Share

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Rajnish RajputLcfvs Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Lcfvs
Guest
Lcfvs

I don’t see any use-case of it, It just makes the code little confusing

As I said, on Twitter, it avoids to pollute the function scope with useless variables declarations.

As practical example, using a same Object.entries(obj), we can use a function to treat only the values, another to treat both values & keys, without creating another array from the first one. 😉