Definition and Usage

Rest parameters, also called variable arguments, are a type of function parameter that allows accepting a variable number of arguments.

They are useful when you want to pass any number of arguments without fixing the count during a function call.

How It Works

  • The rest parameter is declared by adding three dots (...) before the last parameter in a function definition.
  • This parameter is called the rest parameter.
  • When calling the function, you can pass zero or more arguments at this position, separated by commas.
  • The passed arguments are collected into an array inside the function.

Features

  • It is one of the parameter types used in JavaScript function definitions.
  • The rest parameter must always be the last parameter in the parameter list.
  • The rest parameter allows a function to accept a variable number of arguments as an array.
    (You can directly use array methods like map(), filter(), and forEach() on this array.)
  • The term 'rest' comes from the fact that these parameters collect all the remaining arguments after any named ones have been accounted for. That's why they're also known as variable arguments.

Usage

The rest parameter can be used in all of the following function definition styles:

JavaScript - Function declarations 
function fn(...rest) {
    console.log(rest); // rest arguments received as an array
}

fn(1, 2, 3); // Output: [1, 2, 3]
fn(1, 2, 3, 4); // Output: [1, 2, 3, 4]
fn(1, 2, 3, 4, 5); // Output: [1, 2, 3, 4, 5]
JavaScript - Function expressions 
const expressionFn = function (...rest) {
    console.log(rest); // rest arguments received as an array
}

expressionFn(1, 2, 3); // Output:  [1, 2, 3]
expressionFn(1, 2, 3, 4); // Output:  [1, 2, 3, 4]
expressionFn(1, 2, 3, 4, 5); // Output:  [1, 2, 3, 4, 5]
JavaScript - Arrow function expressions 
const arrowFn = (...rest) => {
    console.log(rest); // rest arguments received as an array
}

arrowFn(1, 2, 3); // Output:  [1, 2, 3]
arrowFn(1, 2, 3, 4); // Output:  [1, 2, 3, 4]
arrowFn(1, 2, 3, 4, 5); // Output:  [1, 2, 3, 4, 5]

Syntax

JavaScript 
// When there are fixed parameters
function functionName(param1, [param2,] ...restParams) {
    // You can use restParams as an array inside the function body
}

// When there are no fixed parameters
function functionName(...restParams) {
    // You can use restParams as an array inside the function body
}
  • param1, param2: Fixed parameters for the function. They are optional and can be omitted or multiple fixed parameters can be declared as needed.
  • ...restParams: The rest parameter collects all additional arguments passed after the fixed parameters into a single array. It must always be placed last in the parameter list.

Example

JavaScript 
function myFun(a, b, ...manyMoreArgs) {
    console.log("a:", a);
    console.log("b:", b);
    console.log("Rest parameter manyMoreArgs:", manyMoreArgs);
}

myFun("apple", "banana", "cherry", "date", "elderberry", "fig");

// Output:
// a: apple
// b: banana
// Rest parameter manyMoreArgs: [ 'cherry', 'date', 'elderberry', 'fig' ]

The example above demonstrates how to use rest parameters in JavaScript. The rest parameter collects all arguments passed to the function that come after explicitly declared parameters into an array.

In this case, the function myFun takes three parameters: a, b, and ...manyMoreArgs. The parameters a and b correspond to the first and second arguments respectively. The ...manyMoreArgs parameter collects the remaining arguments into an array named manyMoreArgs.

Therefore, when calling myFun("apple", "banana", "cherry", "date", "elderberry", "fig"), the console outputs "a: apple" and "b: banana", and the remaining arguments are stored in the manyMoreArgs array and logged accordingly.

Things to Keep in Mind

  1. A function can have only one rest parameter.
  2. The rest parameter must always be the last parameter in the function's parameter list, regardless of how many fixed parameters exist.
JavaScript 
// Incorrect: more than one rest parameter
function wrong1(...one, ...wrong) {} // Error
JavaScript 
// Incorrect: rest parameter not last
function wrong2(...wrong, arg2, arg3) {} // Error
  1. Rest parameters are not counted in the function's length property.
JavaScript 
function exampleFunction(a, b, ...restParams) {
    // function body
}

console.log(exampleFunction.length); // Output: 2

Using Rest Parameters to Represent Variable-Arity Functions

A variable-arity function (also called a variadic function) is a function that can accept and handle a varying number of arguments. Such functions do not require a fixed number of arguments at the time of the call and can process as many arguments as needed.

Rest parameters provide a powerful tool in JavaScript to represent variable-arity functions. They enable functions to accept and manage a flexible number of arguments, as seen in JavaScript’s built-in console.log() function, which is a variable-arity function.

JavaScript's console.log() Function

JavaScript 
console.log("Hello", "World", "!");
// Output: "Hello World !"

Example: Using Rest Parameters in a Variadic Function

JavaScript 
function sum(...numbers) {
    let total = 0;
    
    for (let number of numbers) {
        total += number;
    }
    
    return total;
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Code Explanation
The for...of loop iterates over iterable objects such as arrays and strings.

Specifications

Specification of the Rest Parameter
Specification
...restParams ECMAScript Language Specification
#sec-function-definitions

Browser compatibility

Browser Compatibility of the Rest Parameter
Syntax
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
...restParams 47 12 15 10

References

See also