What Is the Rest Parameter in JavaScript?
The rest parameter syntax in JavaScript allows functions to accept an
indefinite number of arguments represented as a standard array.
Introduced in ECMAScript 2015 (ES6), this feature simplifies how
developers handle variable numbers of function inputs by providing a
clean, modern alternative to the legacy arguments object.
This article covers the syntax, practical use cases, core rules, and
differences between rest parameters and older approaches.
Understanding the Rest Parameter Syntax
The rest parameter is written using three consecutive dots
(...) followed by the name of the array that will hold the
arguments.
function collectArgs(...args) {
console.log(args);
}
collectArgs(1, 2, 3, 4); // Output: [1, 2, 3, 4]When the function is invoked, the rest parameter aggregates all
remaining individual arguments into a true JavaScript
Array, giving you immediate access to array methods like
.map(), .filter(), and
.reduce().
Basic Usage and Practical Example
A common use case for rest parameters is creating functions that perform calculations or transformations on an arbitrary number of inputs.
function sumAll(...numbers) {
return numbers.reduce((total, current) => total + current, 0);
}
console.log(sumAll(5, 10, 15)); // Output: 30
console.log(sumAll(1, 2)); // Output: 3
console.log(sumAll()); // Output: 0Combining with Regular Parameters
You can combine regular positional parameters with a rest parameter. The rest parameter will collect only the arguments that were not assigned to the preceding parameters.
function formatMessage(sender, prefix, ...messages) {
return `${sender} (${prefix}): ${messages.join(' ')}`;
}
console.log(formatMessage('Alice', 'Admin', 'Server', 'restarted', 'successfully.'));
// Output: Alice (Admin): Server restarted successfully.In this example, 'Alice' is assigned to
sender, 'Admin' to prefix, and
the remaining strings are gathered into the messages
array.
Core Rules for Rest Parameters
When working with rest parameters, keep two critical rules in mind:
Must be the last parameter: A function definition can only place the rest parameter at the very end of its parameter list. Placing it before another parameter will throw a
SyntaxError.// SyntaxError: Rest parameter must be last formal parameter function invalid(a, ...b, c) {}Only one rest parameter per function: A function cannot have multiple rest parameters.
Rest Parameters
vs. The arguments Object
Before ES6, handling variable arguments required using the built-in
arguments object. Rest parameters are preferred for several
reasons:
- Real Array Instance: Rest parameters create an
actual
Arrayinstance, allowing direct use of methods like.forEach()or.sort(). Theargumentsobject is only “array-like” and requires conversion (e.g.,Array.from(arguments)) to use array methods. - Arrow Function Support: Arrow functions do not have
their own
argumentsobject, making rest parameters the only way to handle variable arguments within them. - Selectivity: The
argumentsobject contains all arguments passed to the function, whereas rest parameters only capture the arguments left over from explicitly defined positional parameters.