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){ 
    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.


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”.


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) {

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

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

2 thoughts on “Understanding the Rest Operator in Javascript

  • 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. 😉

    • Rajnish Rajput

      First of all, thank you for reading and commenting I really appreciate it.
      Thank you again for the idea of *scope pollution*, As it deserves the whole article on it I’ll write and link to it.

Leave a Reply

Your email address will not be published.