Variadic functions
A function needs to accept an arbitrary number of arguments and process them as an array.
JS Puzzles · Const
Spread vs Rest
Rest parameters gather remaining function arguments into an array, while spread syntax expands an iterable into separate arguments or elements. Both use ..., but their syntactic position determines which behavior applies.
How it works
The same three-dot notation has opposite roles depending on where it appears: in a function parameter list, rest gathers remaining arguments into an array; in a call or similar expression, spread expands an iterable into separate arguments or elements.
Syntax
function name(required, ...rest) {}
name(...iterable)Parameters
| Name | Type | Description |
|---|---|---|
rest | Array | The parameter name after ...; it receives the remaining arguments as an array. |
Returns
A rest parameter produces an array containing the remaining arguments; spread syntax supplies iterable items as arguments or literal elements.
Key points
- A function parameter prefixed with
...gathers the remaining supplied arguments into an array. - Rest is a collecting operation: values not assigned to earlier parameters are placed into one array.
- Rest and spread share notation but perform inverse operations, so their position in the syntax determines the meaning.
- Inside a function declaration's parameter list, trailing
...nameidentifies a rest parameter. - At a call site, spread supplies the iterable's items as separate argument positions.
- Rest parameters are useful for variadic functions whose callers may provide different argument counts.
Common mistakes
- A rest parameter cannot precede another parameter; it must be the final parameter in the function definition.
- Spread in a function call requires an iterable value, such as an array; it does not mean that every object can be expanded there.
Example: Gather and expand values
function collect(first, ...rest) {
return [first, ...rest];
}
const values = collect("a", "b", "c");
console.log(values); // ["a", "b", "c"]
console.log(Math.max(...values.map(value => value.length))); // 1The function gathers extra arguments into an array, while the later call expands an iterable into individual arguments.
When to use it
Forwarding iterable values
An existing array must provide individual arguments to a function call.
Building collections
Values from an iterable need to be inserted into an array or combined with other literal elements.
Interview questions
QHow do rest parameters differ from spread syntax?
Rest parameters appear in a function definition and collect all remaining arguments into an array. Spread syntax appears in a call or similar expression and expands an iterable into separate arguments or elements.
Follow-up: What happens if a rest parameter is followed by another parameter? It is invalid because the rest parameter must be last.
QWhy use a rest parameter?
A rest parameter lets one function accept any number of arguments while providing those extra values as a real array. This is more convenient for array operations than an array-like argument collection.
Follow-up: How would you pass the collected values to another function expecting separate arguments? Use spread syntax at the call site, such as target(...values).
QHow can an array be passed to a function that expects separate arguments?
Spread syntax expands an iterable in a function call, so an array can supply individual arguments to a function such as Math.max. The same notation can also expand values into array or object literals as documented on the page.
Follow-up: What determines whether ... gathers or expands? Its syntactic position: parameter-list position means rest, while call or similar expression position means spread.
Related
argumentsfor..ofiterable objectsArray