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

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

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

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

Контент

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

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

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

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

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

**Головна різниця в одному реченні: spread розпаковує елементи (розкриває масив або об'єкт), а rest збирає елементи (пакує залишок у масив або об'єкт).** Пишуться вони однаково, трьома крапками, тому розрізняти їх доводиться за позицією у коді, а не за виглядом.

## Теорія

### TL;DR
- Spread розгортає структуру: `[...arr]`, `{...obj}`, `fn(...args)`.
- Rest пакує залишок: `function fn(...args)`, `[a, ...rest]`, `{ a, ...rest }`.
- Spread живе в контексті виклику або створення, rest, у контексті оголошення або деструктуризації.
- Результат spread, це окремі елементи; результат rest, це новий масив або об'єкт.
- `...` сам по собі не оператор мови, а частина синтаксису деструктуризації та виклику функції.
- Обидва роблять поверхневе копіювання (shallow copy).

### Швидкий приклад
```javascript
function logFirstAndRest(first, ...rest) { // rest збирає
  console.log('First:', first);
  console.log('Others:', rest);
}

const numbers = [10, 20, 30, 40];
logFirstAndRest(...numbers);               // spread розгортає

// Що відбувається:
// logFirstAndRest(10, 20, 30, 40);
// first = 10
// rest  = [20, 30, 40]
```

### Spread, розпакування даних
Використовується, коли потрібно розгорнути структуру (масив або об'єкт) на окремі елементи.

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

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

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

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

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

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

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

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

Приклад у виклику функції:

```javascript
function sum(a, b, c) {
  return a + b + c;
}
const nums = [1, 2, 3];
console.log(sum(...nums)); // 6
```

Одне правило: spread розкриває структуру.

### Rest, збирання даних
Використовується, коли потрібно зібрати кілька елементів в одну структуру (масив або об'єкт).

Приклад у функціях:

```javascript
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
```

> Тут `...numbers` збирає всі аргументи в масив `[1, 2, 3, 4]`.

Приклад у деструктуризації масиву:

```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' }
```

Одне правило: rest збирає залишок.

### Порівняння віч-на-віч

| Критерій | Spread (`...`) | Rest (`...`) |
| --- | --- | --- |
| Дія | Розпаковує значення | Збирає значення |
| Де використовується | У виклику функцій, масивах, об'єктах | У параметрах функцій і деструктуризації |
| Результат | Окремі елементи | Новий масив або об'єкт |
| Приклад з масивом | `[...arr]` дає `1, 2, 3` | `[a, ...rest]` дає `rest = [2, 3]` |
| Приклад з об'єктом | `{...obj}` | `{ a, ...rest }` |
| Приклад з функцією | `sum(...nums)` | `function sum(...nums)` |

### Коли вони зустрічаються разом
Найкраще різницю видно там, де обидва працюють в одному рядку коду.

```javascript
function logFirstAndRest(first, ...rest) {
  console.log('First:', first);
  console.log('Others:', rest);
}

const numbers = [10, 20, 30, 40];

logFirstAndRest(...numbers);
// Розшифровка: logFirstAndRest(10, 20, 30, 40);
// first = 10
// rest  = [20, 30, 40]
```

Тут spread розкриває `numbers` у момент виклику функції, а rest збирає аргументи вже всередині функції. Просте правило для запам'ятовування: spread, це «розгорни», rest, це «збери».

### Типові помилки
1. **Шукати різницю в синтаксисі.** Символи однакові, різниця виключно контекстна: контекст виклику або створення означає spread, контекст оголошення або деструктуризації означає rest.
2. **Називати `...` окремим оператором мови.** Це не оператор, а частина синтаксису деструктуризації та виклику функції, тому він не працює сам по собі: `const ...rest = arr;` це синтаксична помилка.
3. **Очікувати глибокої копії.** І spread, і rest копіюють поверхнево, тож вкладені об'єкти лишаються спільними.

```javascript
   const state = { user: { name: 'Alex' } };
   const copy = { ...state };
   copy.user.name = 'Maria';
   console.log(state.user.name); // Maria
   ```
4. **Ставити rest-параметр не останнім.** `function fn(...args, last) {}` не парситься: rest забирає все, що лишилося, тому після нього нічого бути не може.
5. **Плутати `...args` з `arguments`.** Rest завжди дає справжній масив і працює у стрілкових функціях, а `arguments` це псевдомасив, якого в стрілкових функціях немає.

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

Для рев’юера

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

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