Операторы spread и rest

Три точки ... в JavaScript делают две противоположные вещи: раскрывают массив в список значений или, наоборот, собирают несколько значений в массив. Первое называют spread, второе — rest.

Раскрытие массива

Оператор ... перед массивом подставляет его элементы по одному, как будто вы перечислили их через запятую:

console.log(...[1, 2, 3]); // 1 2 3

Это удобно, когда функция ждёт отдельные значения, а у вас массив:

const numbers = [4, 9, 2];
 
console.log(Math.max(...numbers)); // 9

Копирование и объединение массивов

Раскрыв массив внутри новых квадратных скобок, вы получаете его копию. Так же объединяют несколько массивов:

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
 
console.log(merged.join(', ')); // 1, 2, 3, 4

Исходные массивы при этом не меняются.

Объекты

С объектами оператор работает так же. Свойства, записанные позже, заменяют одноимённые более ранние:

const user = { name: 'Анна', age: 25 };
const updated = { ...user, age: 26 };
 
console.log(updated.name, updated.age); // Анна 26

Это основной способ «изменить» объект, не трогая исходный.

Остаточные параметры

В объявлении функции три точки собирают все оставшиеся аргументы в массив:

function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}
 
console.log(sum(1, 2, 3)); // 6

Такой параметр может быть только один и должен стоять последним.

Остаток при деструктуризации

Тот же приём работает при деструктуризации: первая переменная получает первый элемент, а остальные собираются в массив:

const [first, ...others] = [1, 2, 3];
 
console.log(first);             // 1
console.log(others.join(', ')); // 2, 3

Частая ошибка

Копия получается поверхностной: вложенные объекты и массивы не копируются, а остаются общими.

const original = { tags: ['a'] };
const copy = { ...original };
copy.tags.push('b');
 
console.log(original.tags.join(', ')); // a, b

Чтобы скопировать данные целиком, используют structuredClone(original).