Understanding the Rest Operator in Javascript
JavaScript 2 CommentsThe 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
source…
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) { 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.
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.