Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Оператор ... spread». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Коли він використовується з **масивом**, він **"розкриває"** цей масив,
тобто **розкладає його елементи по місцях**.

---

## Приклад:

```javascript
const arr = [1, 2, 3];
console.log(...arr); // 1 2 3
```

`...arr` **розпаковує** масив, перетворюючи його на послідовність значень.
Без нього ти б отримав `[1, 2, 3]`,
а з ним - просто `1 2 3`.

---

## Основні застосування з масивами:

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

```javascript
const numbers = [1, 2, 3];
const copy = [...numbers];

console.log(copy); // [1, 2, 3]
console.log(copy === numbers); // false (новий масив)
```

Так створюється **поверхнева копія** масиву.

---

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

```javascript
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];

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

Можна вставляти і між іншими елементами:

```javascript
const result = [0, ...a, 99, ...b];
console.log(result); // [0, 1, 2, 99, 3, 4]
```

---

### 3. Додавання елементів на початок або в кінець

```javascript
const arr = [2, 3];
const newArr = [1, ...arr, 4];
console.log(newArr); // [1, 2, 3, 4]
```

---

### 4. Передача елементів як окремих аргументів

```javascript
const nums = [10, 20, 30];

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

console.log(sum(...nums)); // 60
```

`...nums` розкриває масив в аргументи функції.

---

### 5. Створення нового масиву зі зміненим елементом (іммутабельно)

```javascript
const arr = [1, 2, 3];
const newArr = [...arr.slice(0, 1), 99, ...arr.slice(2)];
console.log(newArr); // [1, 99, 3]
```

Чудовий прийом для React та інших місць, де не можна мутувати дані.

---

### 6. Перетворення ітерованих об'єктів на масив

```javascript
const str = "hello";
const chars = [...str];
console.log(chars); // ["h", "e", "l", "l", "o"]
```

Spread працює з **усіма ітерованими об'єктами** - рядками, `Set`, `Map`, `NodeList` тощо.

---

## Важливо пам'ятати:

- Робить **лише поверхневу копію** (вкладені об'єкти копіюються за посиланням).
- Працює тільки з **ітерованими об'єктами** (наприклад, не зі звичайними об'єктами, якщо не використовувати `{...obj}`).

---

## Коротко:

| Що робить | Розкриває (розпаковує) елементи масиву |
|---|---|
| Тип операції | "Розширення" |
| Повертає | Набір значень |
| Змінює вихідний масив | Ні |
| Підходить для | копіювання, об'єднання, передачі аргументів |
| Приклад | `[...arr] -> [1, 2, 3]` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати369 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.