JavaScript The Rest Parameter

A rest parameter (...) collects the remaining function arguments into a new array. It looks like spread syntax, but does the opposite job: spread expands values, while rest collects them.

You will use rest in function parameter lists and destructuring when you need to capture whatever values are left. In array destructuring, this is called a rest element; in object destructuring, it is a rest property.

A rest parameter collects values into a new array. In array destructuring, a rest element also collects values into a new array. In object destructuring, a rest property collects the remaining properties into a new object. If a rest parameter or rest element has no remaining values, it produces an empty array.

Rest parameter: used in a function parameter list. Rest element: used in array destructuring. Rest property: used in object destructuring.

function greet(first, ...rest) {
  console.log(first); // 'Hello'
  console.log(rest);  // ['World', '!']
}

greet('Hello', 'World', '!');

You can use the rest parameter during array destructuring to assign the first few values to variables and collect the remaining ones into an array.

const [first, second, ...others] = [10, 20, 30, 40, 50];

console.log(first);  // 10
console.log(second); // 20
console.log(others); // [30, 40, 50]

first and second get individual values, while others collects everything that remains. The rest element must come after the values you want to extract individually and collects the remaining elements into a new array.

A rest parameter must be the last parameter in a function definition. A rest element or rest property must also be the last item in its destructuring pattern. You cannot have anything after it.

// Correct: rest is last
function example(a, b, ...rest) {
  console.log(a, b, rest);
}

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

// Wrong: rest is NOT last (this will throw a SyntaxError)
// function wrong(...rest, last) {} // SyntaxError

Putting something after a rest parameter, rest element, or rest property causes a SyntaxError. Rest must always come at the end of its parameter list or destructuring pattern.

Rest also works in object destructuring. You can extract specific properties and collect the remaining ones into a new object.

const person = { name: 'Alice', age: 25, city: 'Paris', job: 'Developer' };

const { name, age, ...details } = person;

console.log(name);    // 'Alice'
console.log(age);     // 25
console.log(details); // { city: 'Paris', job: 'Developer' }

name and age are extracted directly, and details gets all the remaining properties.

Object rest creates a new object containing the remaining own enumerable properties. It is still a shallow copy, so nested objects inside details remain shared with the original object.

The rest parameter lets a function accept zero or more additional arguments and collect them into an array. The collected values come in as a real array, so you can use array methods on them.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100

You can also mix fixed parameters with a rest parameter:

function introduce(greeting, ...names) {
  names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introduce('Hello', 'Alice', 'Bob', 'Charlie');
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

The same ... syntax has opposite jobs. Rest collects remaining values into a new array or object, while spread expands values from an iterable or object into individual elements, properties, or arguments depending on the context.

function sum(...numbers) { // rest: arguments become an array
  return numbers.reduce((total, number) => total + number, 0);
}

const values = [1, 2, 3];
console.log(sum(...values)); // spread: array becomes arguments

const copy = [...values]; // spread: array becomes new elements
console.log(copy); // [1, 2, 3]

• Rest parameters collect remaining function arguments into a new array.
• Rest elements collect remaining values during array destructuring.
• Rest properties collect remaining properties during object destructuring.
• Rest must be the last item in its function parameter list or destructuring pattern.
• Rest is useful for functions that accept a variable number of arguments.
• Rest and spread both use ..., but rest collects while spread expands.

What's next? Now that you know how to gather extra values, let's see how JavaScript shortcuts logical expressions in the next tutorial.

• What is the rest parameter in JavaScript and how is it different from the spread operator?
• How do you use rest parameters to create a function with variable arguments?
• Can the rest parameter be placed in the middle of a parameter list?

Videos for this topic will be added soon.