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

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

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

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

Контент

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

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

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

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

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

## 1. Spread-оператор (розповсюдження)

> **Spread** використовується для **розпакування (розкриття)** масиву або об'єкта на окремі елементи.

### Приклад з масивом

```javascript
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4, 5];

console.log(moreNumbers); // [0, 1, 2, 3, 4, 5]
```

Тут `...numbers` "розкрив" масив `[1, 2, 3]` всередину нового масиву.

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

```javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

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

Це **поверхнева копія** (shallow copy).

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

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

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

### У функціях - розкриття аргументів

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

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

> `...nums` перетворює `[1, 2, 3]` -> `sum(1, 2, 3)`

### Приклад з об'єктом

```javascript
const user = { name: 'Alex', age: 25 };
const newUser = { ...user, city: 'Paris' };

console.log(newUser); // { name: 'Alex', age: 25, city: 'Paris' }
```

Розпакування властивостей з одного об'єкта в інший.
Якщо ключі збігаються, **пізніше значення перезапише раніше**:

```javascript
const merged = { a: 1, ...{ a: 2, b: 3 } };
console.log(merged); // { a: 2, b: 3 }
```

## 2. Rest-оператор (залишок)

> **Rest** використовується для **збирання елементів, що залишилися**, у масив або об'єкт.
> Працює **у зворотний бік** - не розпаковує, а **збирає**.

### У масивах:

```javascript
const [first, ...rest] = [1, 2, 3, 4];

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

### В об'єктах:

```javascript
const user = { name: 'Alex', age: 25, city: 'Paris' };
const { name, ...info } = user;

console.log(name); // Alex
console.log(info); // { age: 25, city: 'Paris' }
```

### У функціях:

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

console.log(sum(1, 2, 3, 4)); // 10
```

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

## Spread vs Rest - різниця

| Особливість | Spread | Rest |
|---|---|---|
| Що робить | Розпаковує | Збирає |
| Де використовується | При виклику функції, створенні масиву/об'єкта | В оголошенні функції або деструктуризації |
| Приклад | `[...arr]`, `{...obj}`, `fn(...args)` | `function fn(...args)`, `[a, ...rest]` |

## Приклади "до і після"

| До ES6 | З ES6 |
|---|---|
| `arr1.concat(arr2)` | `[...arr1, ...arr2]` |
| `Object.assign({}, obj1, obj2)` | `{...obj1, ...obj2}` |
| `Array.prototype.slice.call(arguments)` | `(...args) => {}` |

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

1. **Spread / Rest - поверхневі**
-> вкладені об'єкти або масиви копіюються за посиланням.

```javascript
  const obj = { nested: { a: 1 } };
  const copy = { ...obj };
  copy.nested.a = 2;
  console.log(obj.nested.a); // 2
  ```
2. **Spread не можна використовувати у правій частині присвоєння без контексту**
Неправильно: `const ...rest = arr;` - помилка
Правильно: `const [a, ...rest] = arr;`

## Підсумок

| Контекст | Поведінка `...` | Приклад |
|---|---|---|
| **Spread (розпакування)** | Розгортає масив/об'єкт | `[...arr]`, `{...obj}`, `sum(...nums)` |
| **Rest (залишок)** | Збирає залишок елементів | `[a, ...rest]`, `function fn(...args)` |

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

Для рев’юера

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

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