Оператор rest

Оператор rest (...) — это синтаксис, который собирает несколько элементов в один массив или объект. Он противоположен spread: spread раскрывает, rest собирает.

В параметрах функции

Используется для сбора всех переданных аргументов, которые не были явно описаны в списке параметров.

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

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

Здесь numbers — это массив, содержащий все аргументы, переданные в функцию.

...args — общепринятое имя, но можно использовать любое: ...values, ...items.

Полезно, когда количество аргументов неизвестно заранее — например, при обработке пользовательского ввода или API с динамическими параметрами.

В деструктуризации массивов

Позволяет извлечь первые элементы, а остальные собрать в отдельный массив.

const colors = ['красный', 'зелёный', 'синий', 'жёлтый'];

const [first, second, ...others] = colors;

console.log(first);  // "красный"
console.log(second); // "зелёный"
console.log(others); // ["синий", "жёлтый"]

Можно пропустить элементы:

const [, , third, ...rest] = colors;
console.log(third); // "синий"
console.log(rest);  // ["жёлтый"]

Это удобно, когда нужно работать с началом массива, а остальное — передать дальше или игнорировать.

В деструктуризации объектов

Извлекает конкретные свойства, а остальные собирает в новый объект.

const user = {
  name: 'Анна',
  age: 28,
  email: 'anna@example.com',
  role: 'user'
};

const { name, role, ...profile } = user;

console.log(name);   // "Анна"
console.log(role);   // "user"
console.log(profile); // { age: 28, email: 'anna@example.com' }

Часто используется в React для передачи «оставшихся» пропсов:

function Button({ variant, ...rest }) {
  return <button className={variant} {...rest} />;
}

Здесь variant обрабатывается отдельно, а остальные пропсы (onClick, disabled и т.д.) передаются прямо в <button>.

Отличие от spread

Оператор	Действие	Пример
spread	Раскрывает коллекцию на отдельные элементы	`[...arr]`, `{...obj}`
rest	Собирает несколько элементов в одну коллекцию	`(...args)`, `[first, ...rest]`

Один и тот же синтаксис ... — но смысл зависит от контекста:

В объявлении (параметры функции, деструктуризация) — это rest.
В выражении (присваивание, вызов функции) — это spread.