Распаковка (spread)

Распаковка (spread) — это оператор ..., который раскрывает элементы массива или свойства объекта на отдельные значения. Он используется для создания копий, объединения структур и передачи аргументов.

Распаковка массивов

Чтобы создать поверхностную копию массива, используйте spread в квадратных скобках:

const original = ['яблоко', 'груша'];
const copy = [...original];

copy.push('апельсин');
console.log(original); // ['яблоко', 'груша'] — не изменился
console.log(copy);     // ['яблоко', 'груша', 'апельсин']

Это безопасный способ избежать мутации исходного массива.

Распаковка объектов

Аналогично — для объектов:

const user = { name: 'Анна', age: 28 };
const profile = { ...user, city: 'Москва' };

console.log(user);   // { name: 'Анна', age: 28 }
console.log(profile); // { name: 'Анна', age: 28, city: 'Москва' }

Если свойство с таким же ключом уже есть — оно перезаписывается:

const settings = { theme: 'light', lang: 'ru' };
const newSettings = { ...settings, theme: 'dark' };

console.log(newSettings.theme); // "dark" — перезаписано

Объединение массивов

С помощью spread можно объединить несколько массивов в один:

const fruits = ['яблоко', 'груша'];
const vegetables = ['морковь', 'огурец'];
const groceries = [...fruits, ...vegetables];

console.log(groceries); // ['яблоко', 'груша', 'морковь', 'огурец']

Это проще и читаемее, чем concat().

Объединение объектов

Объединение двух объектов с разными ключами:

const config1 = { host: 'localhost', port: 3000 };
const config2 = { ssl: true, timeout: 5000 };
const finalConfig = { ...config1, ...config2 };

console.log(finalConfig);
// { host: 'localhost', port: 3000, ssl: true, timeout: 5000 }

Если ключи совпадают — значение из второго объекта перезаписывает первое.

Передача элементов массива как аргументов

Spread позволяет передать элементы массива в функцию как отдельные аргументы.

Пример: Math.max() принимает несколько чисел, но не массив:

const numbers = [10, 5, 23, 8];

// Неверно:
console.log(Math.max(numbers)); // NaN

// Верно:
console.log(Math.max(...numbers)); // 23

Распаковка работает только на уровне первого уровня вложенности — это поверхностная копия. Если внутри объекта или массива есть вложенные структуры — они остаются по ссылке.