Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Оператор spread». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Spread (`...`)** - це синтаксис, який розкриває (розпаковує) масив, об'єкт або іншу ітеровану структуру на окремі елементи. **Ключове:** spread робить лише поверхневу копію, а не глибоку.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке **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 (**`...`**)** розкриває (розпаковує) ітеровані значення. > Працює з масивами, об'єктами, рядками і колекціями. > Спрощує копіювання, об'єднання і передавання даних. > Робить **поверхневу копію**, а не глибоку.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.