Деструктуризация, spread и rest

Современный синтаксис, который встречается в каждом проекте и на каждом собеседовании.

Деструктуризация распаковывает значения из массивов и объектов в переменные. spread (...) «разворачивает» элементы, rest (...) — собирает остаток.

Деструктуризация объекта и массива

const user = { name: "Аня", age: 30, city: "Москва" };
const { name, age } = user;           // вытащили поля
console.log(name, age);

const [first, second] = [10, 20, 30]; // вытащили по позиции
console.log(first, second);

// значение по умолчанию и переименование
const { role = "guest", city: town } = user;
console.log(role, town);

Вывод:

Аня 30
10 20
guest Москва

spread: копирование и слияние

... в литерале «разворачивает» массив или объект. Так делают поверхностную копию и объединяют структуры.

const arr = [1, 2, 3];
const copy = [...arr, 4];          // копия + добавление
console.log(copy);
console.log(arr === copy);          // разные массивы

const base = { a: 1, b: 2 };
const merged = { ...base, b: 99, c: 3 }; // b перезаписан
console.log(merged);

Вывод:

[ 1, 2, 3, 4 ]
false
{ a: 1, b: 99, c: 3 }

rest: собрать остаток

Те же три точки, но в объявлении — собирают «всё остальное» в массив или объект.

const [head, ...tail] = [1, 2, 3, 4];
console.log(head);
console.log(tail);

const { id, ...other } = { id: 7, name: "Боря", age: 25 };
console.log(id);
console.log(other);

Вывод:

1
[ 2, 3, 4 ]
7
{ name: 'Боря', age: 25 }

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

В аргументах ... собирает все переданные значения в массив — заменяет старый arguments.

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

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

Вывод:

6
100

spread vs rest

Итог

• Деструктуризация распаковывает массивы и объекты, поддерживает значения по умолчанию.
• spread разворачивает — для копий и слияния; rest собирает остаток.
• Одинаковый синтаксис ..., но роль зависит от позиции.