Modern JavaScript: Rest Parameters

Welcome to the Rest Parameters lesson!

This lesson is shown as static text below. However, it's designed to be used interactively. Click the button below to start!

JavaScript allows functions to take a variable number of parameters. In recent versions of JavaScript, we can do that by adding ... to the parameter list. All the arguments we pass in show up in a single array.

function f(...args) {
  return args;
}
f('a', 'b');

Result:

function f(...args) {
  return args;
}
f(1, 2, 3);

Result:

[1, 2, 3]

In JavaScript, this feature is called "rest parameters" because it collects "the rest" of the function's parameters into an array. In other languages, you may see it called "varargs", which stands for "VARiable number of ARGuments".

function max(...numbers) {
  let max = numbers[0];
  for (const n of numbers) {
     if (n > max) {
       max = n;
     }
  }
  return max;
}
max(1, 2, 3);

Result:

Here's a code problem:
Write a function sum that sums numbers. It should take the numbers as rest parameters. If no arguments are given, it should return 0.
function sum(...numbers) {
let total = 0;
for (const n of numbers) {
total += n;
}
return total;
}
const sums = [sum(), sum(100), sum(2000, 1), sum(-500, -300)];
sums;
Goal:
[0, 100, 2001, -800]
Yours:
[0, 100, 2001, -800]
Show Author's Answer
Rest parameters can be used after regular positional parameters.

function addMany(toAdd, ...numbers) {
  const result = [];
  for (const n of numbers) {
    result.push(n + toAdd);
  }
  return result;
}
addMany(2, 1, 7.7, 1000);

Result:

[3, 9.7, 1002]

However, positional parameters can't be used after rest parameters. Trying to do that is an error! (You can type error when a code example will throw an error.)

function addMany(...numbers, toAdd) {
  const result = [];
  for (const n of numbers) {
    result.push(n + toAdd);
  }
  return result;
}
addMany(1, 7.7, 1000, 2);

Result:

SyntaxError: on line 1: Rest element must be last element.

We also can't have multiple rest parameters. The JavaScript virtual machine would have no way to know which argument values go in which rest parameter. Trying to do that also causes an error.

function multiplyArrays(...numbers1, ...numbers2) {
  const result = []
  for (let i = 0; i < numbers1.length; i++) {
    result.push(numbers1[i] * numbers2[i])
  }
  return result
}
multiplyArrays(1, 2, 3, 4)

Result:

SyntaxError: on line 1: Rest element must be last element.

So far we've seen rest parameters in function definitions. However, we can also use the ... syntax when calling a function. When we call f(...args), it means "pass each element of the args array as a separate parameter."

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers);

Result:

In that case, we refer to the ... as "spread" rather than "rest parameters". A different lesson covers the spread feature in more detail.