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

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

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

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

Контент

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

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

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

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

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

## Що робить structuredClone()

`structuredClone()` - це **вбудована функція** в JavaScript,
яка **створює глибоку копію** (deep clone) будь-якого значення,
включно з **об'єктами, масивами, картами, сетами, датами, RegExp, Blob, File, ArrayBuffer і навіть циклічними посиланнями**.

---

### Синтаксис:

```javascript
const clone = structuredClone(value);
```

- `value` - те, що потрібно клонувати;
- повертає **новий незалежний об'єкт**, повністю скопійований.

---

## Приклад простого використання

```javascript
const user = {
  name: "Tim",
  age: 25,
  skills: ["JS", "React"],
  meta: { active: true },
};

const copy = structuredClone(user);

copy.meta.active = false;
console.log(user.meta.active); // true - оригінал не змінився
```

Тут `structuredClone()` створив **нову копію**, а не посилання на той самий об'єкт
(на відміну від поверхневого копіювання через `{...user}`).

---

## Головна відмінність від JSON.parse(JSON.stringify(...))

Раніше для глибокого копіювання часто використовували:

```javascript
const copy = JSON.parse(JSON.stringify(obj));
```

Але в цього способу **багато обмежень**:

| Тип даних | JSON метод | structuredClone |
|---|---|---|
| `Date` | перетворюється на рядок | зберігається як `Date` |
| `Map`, `Set` | губляться | копіюються |
| `undefined` | зникає | зберігається |
| `RegExp`, `Error` | губляться | зберігаються |
| `NaN`, `Infinity` | перетворюються на `null` | зберігаються |
| Циклічні посилання | помилка | підтримуються |

Тобто `structuredClone()` - **надійний і безпечний аналог deep clone**, що підтримує всі типи.

---

## Приклад з циклічними посиланнями

```javascript
const obj = {};
obj.self = obj; // циклічне посилання

const clone = structuredClone(obj);
console.log(clone.self === clone); // true
```

Раніше таке клонування просто викликало б помилку `TypeError`.

---

## Клонування з передачею бінарних даних (опційно)

У `structuredClone` є **другий аргумент** - опції,
які дозволяють **передати (а не скопіювати)** деякі об'єкти (наприклад, `ArrayBuffer`).

```javascript
const buffer = new ArrayBuffer(8);
const clone = structuredClone(buffer, { transfer: [buffer] });

console.log(buffer.byteLength); // 0 - оригінал "переданий" (відключений)
console.log(clone.byteLength);  // 8 - дані тепер у клона
```

Це працює схоже на **Transferable об'єкти** у `postMessage`.

---

## Де працює

Підтримується в усіх сучасних браузерах і в Node.js (починаючи з v17+):

```javascript
structuredClone({ test: true }); // працює в Node 17+
```

---

## Підсумок

| Пункт | Опис |
|---|---|
| Що робить | Глибоко клонує значення будь-якого типу |
| Повертає | Повну незалежну копію |
| Підтримує | `Date`, `Map`, `Set`, `RegExp`, `ArrayBuffer`, циклічні посилання |
| Не підтримує | Функції, DOM-елементи |
| Сумісність | Сучасні браузери і Node.js 17+ |
| Аналог | Безпечна альтернатива `JSON.parse(JSON.stringify())` |

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

Для рев’юера

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

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