What is rest parameters JavaScript?

In this article, we will discuss the JavaScript rest parameters and explore the functionality, use cases, and how they increase the flexibility of functions.

The rest parameter syntax enables a function to accept an unlimited number of arguments as an array, providing a method to represent functions in JavaScript.

Let’s see an example code:

function addition(...theArgs) {
  let totalResult = 0;
  for (const arg of theArgs) {
    totalResult += arg;
  }
  return totalResult;
}

console.log(addition(11, 12, 13));

console.log(addition(11, 12, 13, 14));

Here is the syntax:

function a(x, y, ...theArgs) {
  //You can start to code here
}

The Description

The last parameter of a function definition can be prefixed with three U+002E FULL STOP characters (…), resulting in all remaining (user-supplied) parameters being placed within an Array object.

Here’s an example code:

function sample(x, y, ...valueArgs) {
  console.log("x", x);
  console.log("y", y);
  console.log("valueArgs", valueArgs);
}

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

Output:

x one
y two
valueArgs [ 'three', 'four', 'five', 'six' ]

In the context of a function definition, it is possible to include just a single rest parameter, and this particular rest parameter should be placed as the final parameter within the function definition.

function mistake1(...one, ...mistake) {}
function mistake1(...mistake, argument2, argument3) {}

The function’s length property does not include the rest parameter in its count.

What is the difference between rest parameters and the arguments object?

Here are three main variations between rest parameters and the arguments object:

1. The arguments object and rest parameters work differently. The arguments object does not a real array, while rest parameters are actual Array occurrence. You can directly use methods like sort(), map(), forEach(), or pop() on rest parameters.
2. The arguments object has an extra (deprecated) callee property.
3. In a non-strict function with simple parameters, the arguments object harmonizes its indicator with the parameter values. On the other hand, the rest parameter array won’t update its value when the named parameters are reassigned.
4. The rest parameter groups all the additional parameters into a single array, but it does not include any named arguments that come before the …restParam. However, the arguments object consists of all the parameters, including the ones in the …restParam array, bundled into one array-like object.

Argument length

If sampleArgumnets is an array, its length tells the number of elements it has. When the function has only one parameter using the rest syntax, restParams.length will be the same as arguments.length.

function value1(...sampleArgumnets) {
  console.log(sampleArgumnets.length);
}

value1();
value1(10); 
value1(10, 11, 12);

Utilizing rest parameters in merging with ordinary parameters

In this example, a rest parameter gathers all parameters (except the first one) into an array. Each value in the array is then multiplied by the first parameter, and the array is returned.

Here’s an example code:

function multiplication(multiplier, ...theArguments) {
  return theArguments.map((element) => multiplier * element);
}

const arrayresult = multiplication(10, 18, 35, 54);
console.log(arrayresult);

Convert arguments into an array

You can use array methods with rest parameters, but not with the arguments object.

For example:

function value(...theArgs) {
  const sortedVariable = theArgs.sort((a, b) => a - b);
  return sortedVariable;
}

console.log(value(10, 21, 27, 9)); 

function sortArgumentsResult() {
  const argsArray = Array.from(arguments);
  const sortedVariable = argsArray.sort((a, b) => a - b);
  return sortedVariable;
}

console.log(sortArgumentsResult(10, 21, 27, 9));

Rest parameters were made known to make it simple to convert a set of arguments into an array by decreasing the amount of repetitive code previously needed.

Before rest parameters, we had to manually convert arguments into a regular array before using array methods on them.

Example:

function character(x, y) {
  const normalArrayExample = Array.prototype.slice.call(arguments);
 
  const normalArray2Sample = [].slice.call(arguments);

  const normalArrayFromSample = Array.from(arguments);

  const first = normalArrayExample.shift(); 
  const firstBad = arguments.shift(); 
}

Now, you can easily access a regular array using a rest parameter.

function character(...args) {
  const normalArrayExample = args;
  const first = normalArrayExample.shift();
}

Conclusion

In conclusion, Rest parameters in JavaScript provide a powerful structure to handle function parameters effectively.

By adopting this feature, you can shorten your code, improve readability, and increase the flexibility of your functions.

Additional Resources

• How to Use Short Circuit Evaluation JavaScript
• Do I Need Semicolons in JavaScript?
• How to rotate image in JavaScript?

Adones Evangelista

Programmer & Technical Writer at PIES IT Solution

Adones Evangelista is a programmer and writer at PIES IT Solution, author of over 900 tutorials and error-fix guides at itsourcecode.com. Specializes in JavaScript, Django, Laravel, and Python error debugging covering ValueError, TypeError, AttributeError, ModuleNotFoundError, and RuntimeError, plus C/C++ and PHP capstone projects for BSIT students.

Expertise: JavaScript · Python · Django · Laravel · Error Debugging · C/C++
 · View all posts by Adones Evangelista →