Що приховують три крапки?
Вітаю, друзі! Сьогодні розповім вам про деякі неочевидні підводні камені так званого spread-оператора. Я сподіваюсь, ви вже в курсі, для чого він існує, тож перейду відразу до прихованих нюансів.

Порядок важливий
Коли ви "підмішуєте" обʼєкт, то значення будуть застосуватись в порядку додавання в новий обʼєкт:

{ a: 1, b: 2, ...{ b: 3 } } // { a: 1, b: 3 }

{ ...{ b: 3 }, a: 1, b: 2 } // { a: 1, b: 2 }

Останнє входження ключа перезаписує попереднє. Spread — це не злиття, а послідовне копіювання полів з обʼєктів у новий.

undefined в масивах і обʼєктах
Ви спокійно можете розгорнути той же undefined або null в обʼєкт, а от з масивом такий трюк не пройде.

{ ...undefined } // {}

[...undefined]   // 💥 TypeError

Усе через те, що масив вимагає, аби вхідний обʼєкт був Iterable, тобто такий, яким можна пройтися з Symbol.iterator, і nullish значення, очевидно такими не є. А от звичайний обʼєкт не такий вибагливий, і йому достатньо будь-якого значення, до якого можна застосувати Object.keys. У випадку з null та undefined цей метод просто поверне порожній список.

Object ⇄ Array? Ні.
Рівно з тієї самої причини ми можемо розмазати масив в обʼєкт, але не можемо зробити навпаки:

[...{ a: 1 }] // 💥 TypeError: object is not iterable

{ ...[1, 2] } // { 0: 1, 1: 2 }

Spread у масиві очікує ітерабельність — тобто наявність Symbol.iterator. Обʼєкти цього не мають (за замовчуванням), тому розгортання летить з помилкою.

Натомість spread в обʼєкті потребує лише перелічуваних властивостей. А масив — це просто обʼєкт із числовими ключами, які чудово підходять під це визначення.

... не любить порожнечі

const a = [1, , , , 5]; // [1, empty × 3, 5]
const b = [...a]; // [1, undefined, undefined, undefined, 5]

console.log(1 in a); // false
console.log(1 in b); // true

Spread-оператор не просто “копіює” масив — він перетворює його дірки на явно присутні undefined.

У масиві a на індексах 1, 2, 3 немає значень — це так звані дірки (sparse elements). Але при ...a вони ущільнюються: JavaScript вставляє на їхнє місце undefined, і ці індекси стають реально присутніми в структурі масиву.

... не копіює вміст обʼєкта
Технічно. Він поверхнево копіює перший рівень масива або обʼєкта. І якщо там примітивні значення, то можна сказати, це "копія". Але якщо є вкладеності, то ... скопіює посилання на них, а не зробить клоновані копії.

const original = {
  value: 1,
  nested: { deep: true },
};
const copy = { ...original };

copy.nested.deep = false;
console.log(original.nested.deep); // false

А ще ... копіює виключно перший видимий рівень. Тобто прототип, неперелічувані властивості, символи — усе піде під ніж, і ви отримаєте стерильну копію.

***
Якщо дізналися щось нове — напишіть у коментарях, що саме здивувало чи стало у пригоді.

А далі — обирати вам! Про що буде наступний допис?

🔥 — Дірки в масивах: як вони зʼявляються і що ламають
❤️ — Symbol.iterator: ітерабельність під капотом
🤔 — Чи настільки різні масиви та обʼєкти?

✅@babichdev
.