Оператор spread

JavaScriptJunior~1 хв читання

Що таке spread оператор

Spread (...) - це синтаксис, який розкриває (розпаковує) масив, об'єкт або іншу ітеровану структуру на окремі елементи.

Від англійського spread: "розгорнути", "поширити".

1. Spread у масивах

Копіювання масиву

javascript

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // створюємо поверхневу копію

arr2.push(4);

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

На відміну від arr2 = arr1, це новий масив, а не посилання на той самий об'єкт у пам'яті.

Об'єднання масивів

javascript

const a = [1, 2];
const b = [3, 4];
const result = [...a, ...b];

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

Коротший і зрозуміліший аналог a.concat(b).

Додавання елементів

javascript

const arr = [2, 3];
const newArr = [1, ...arr, 4, 5];

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

Spread можна використовувати в будь-якому місці масиву.

Перетворення рядка на масив

javascript

const str = 'Hello';
const chars = [...str];

console.log(chars); // ['H', 'e', 'l', 'l', 'o']

Рядки - ітеровані, тому ... розкриває кожен символ.

2. Spread в об'єктах (ES2018+)

Копіювання об'єкта

javascript

const user = { name: 'Oleh', age: 25 };
const copy = { ...user };

console.log(copy); // { name: 'Oleh', age: 25 }
console.log(copy === user); // false (новий об'єкт)

Об'єднання об'єктів

javascript

const defaults = { theme: 'light', lang: 'en' };
const settings = { theme: 'dark' };

const merged = { ...defaults, ...settings };

console.log(merged); // { theme: 'dark', lang: 'en' }

Властивості справа перезаписують ті, що були раніше.

Додавання нових властивостей при копіюванні

javascript

const user = { name: 'Oleh' };
const updated = { ...user, age: 25, city: 'Kyiv' };

console.log(updated); // { name: 'Oleh', age: 25, city: 'Kyiv' }

3. Spread в аргументах функції

Spread можна використовувати, щоб передати масив як набір аргументів.

Приклад:

javascript

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

Це аналог виклику sum(numbers[0], numbers[1], numbers[2]).

Разом з `Math`

javascript

const nums = [3, 7, 1];
console.log(Math.max(...nums)); // 7

Без spread довелося б писати Math.max.apply(null, nums): громіздко.

4. Spread для клонування і "immutability"

У React, Redux та інших фреймворках часто потрібно створювати нові об'єкти/масиви, а не змінювати старі. Spread ідеально підходить:

javascript

const state = { count: 1 };
const newState = { ...state, count: state.count + 1 };

console.log(newState); // { count: 2 }

Так ми не змінюємо state, а створюємо нову версію (іммутабельність).

5. Spread у деструктуризації

Можна використовувати, щоб зібрати "залишок" значень.

javascript

const user = { name: 'Oleh', age: 25, city: 'Kyiv' };
const { name, ...rest } = user;

console.log(name); // "Oleh"
console.log(rest); // { age: 25, city: 'Kyiv' }

Це називається rest-синтаксис, і він схожий на spread, але працює у зворотний бік: збирає залишок.

6. Spread з колекціями

javascript

const set = new Set([1, 2, 3]);
const arr = [...set];
console.log(arr); // [1, 2, 3]

Spread працює з усіма ітерованими структурами: масивами, рядками, Set, Map.keys(), Map.values() тощо.

7. Spread - поверхнева копія (shallow copy)

Spread не робить "глибоку копію" вкладених об'єктів.

javascript

const user = { name: 'Oleh', address: { city: 'Kyiv' } };
const copy = { ...user };

copy.address.city = 'London';
console.log(user.address.city); // "London"

Якщо потрібен повний клон: використовуй structuredClone() або JSON.parse(JSON.stringify(obj)).

Підсумок

Де застосовується	Що робить
Масиви	Копіювання, об'єднання, додавання елементів
Об'єкти	Копіювання і об'єднання властивостей
Функції	Передавання масиву як списку аргументів
Ітеровані структури	Розкриття елементів (`Set`, `Map`, `string` тощо)

Коротко

Spread (...) розкриває (розпаковує) ітеровані значення. Працює з масивами, об'єктами, рядками і колекціями. Спрощує копіювання, об'єднання і передавання даних. Робить поверхневу копію, а не глибоку.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.