JavaScript Functions
JavaScript Rest Parameters
JavaScript rest parameters collect any number of arguments into a single array.
A rest parameter is written with three dots before the name.
It lets one function accept two arguments, or ten, without changing the definition.
Example
Example
javascript
function addAll(...numbers) {
let total = 0;
for (const n of numbers) {
total += n;
}
return total;
}
console.log(addAll(1, 2, 3, 4));Here, all four arguments are collected into an array called numbers.
The output is 10.
What is a Rest Parameter?
A rest parameter gathers the remaining arguments into a real array.
Because it is a real array, you can use array methods on it directly.
There can only be one rest parameter, and it must be last.
Syntax
Syntax
javascript
function name(...values) {
// values is an array
}The three dots must come immediately before the parameter name.
Mixing Normal and Rest Parameters
Named parameters come first, and the rest parameter picks up whatever is left.
Example
Example
javascript
function report(title, ...scores) {
return title + ": " + scores.length + " scores";
}
console.log(report("Maths", 80, 90, 75));Here, title takes the first argument and the rest go into the array.
It Must Come Last
A rest parameter has to be the final parameter.
Putting anything after it is a syntax error, because there would be nothing left to collect.
Example
Example
javascript
function valid(first, ...others) {
return first + " then " + others.join(", ");
}
console.log(valid("a", "b", "c"));This works because the rest parameter is at the end.
Using Array Methods
The collected values behave like any other array.
Example
Example
javascript
function largest(...numbers) {
return Math.max(...numbers);
}
console.log(largest(5, 12, 8, 44));Here, the array is collected and then spread back out into Math.max.
Rest and Spread Look the Same
Three dots in a function definition collect values together.
Three dots in a function call spread values apart.
Example
Example
javascript
function show(...items) {
return items.length;
}
const list = [1, 2, 3];
console.log(show(...list));The call spreads the array into three arguments, and the definition collects them again.
An Empty Rest Parameter
If no extra arguments are passed, the rest parameter is an empty array.
Example
Example
javascript
function count(...items) {
return items.length;
}
console.log(count());The output is 0, not undefined, which makes it safe to loop over.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Rest Parameters</title>
</head>
<body>
<h1>JavaScript Rest Parameters</h1>
<p id="result"></p>
<script>
function addAll(...numbers) {
let total = 0;
for (const n of numbers) {
total += n;
}
return total;
}
document.getElementById("result").innerHTML =
"Total: " + addAll(5, 10, 15, 20);
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try adding more numbers:
Pass six numbers to addAll without changing the function.
Important Points
- A rest parameter is written with three dots before the name.
- It collects the remaining arguments into a real array.
- There can be only one, and it must be the last parameter.
- With no extra arguments it is an empty array, not
undefined. - Three dots collect in a definition and spread in a call.
Conclusion
JavaScript rest parameters let a function accept any number of arguments.
Because the result is a real array, every array method is available immediately.
Understanding rest parameters helps you write flexible, reusable functions.