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

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

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

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

Контент

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

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

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

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

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

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

Це **найсучасніший і найбезпечніший спосіб** клонування даних у JS без сторонніх бібліотек.

---

## Коротко

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

Вона створює **повністю незалежну копію** об'єкта,
включно з усіма вкладеними структурами,
і повертає новий об'єкт без спільних посилань з оригіналом.

---

## Приклад

```javascript
const user = {
  name: 'Тим',
  address: { city: 'Berlin' },
  hobbies: ['sport', 'music']
};

const clone = structuredClone(user);

clone.address.city = 'Lviv';
clone.hobbies.push('coding');

console.log(user.address.city); // "Berlin"
console.log(user.hobbies);      // ['sport', 'music']
```

Копія **глибока** -
усі вкладені об'єкти і масиви створюються заново.
Оригінал залишається незмінним.

---

## Що вміє копіювати `structuredClone`

Підтримує:

- об'єкти (`{}`), масиви (`[]`)
- вкладені структури будь-якої глибини
- `Date`
- `Map`, `Set`
- `Blob`, `File`, `ArrayBuffer`, `TypedArray`
- `RegExp` (зберігає шаблон і прапорці)
- навіть **циклічні посилання** (на відміну від `JSON.stringify()`)

---

### Приклад з Map і Date

```javascript
const data = {
  date: new Date(),
  map: new Map([['a', 1], ['b', 2]])
};

const copy = structuredClone(data);

console.log(copy.date === data.date); // false (новий об'єкт)
console.log(copy.map.get('a'));       // 1
```

---

### Приклад з циклічним посиланням (працює!)

```javascript
const obj = {};
obj.self = obj;

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

`structuredClone()` справляється навіть із самопосиланнями,
де `JSON.parse(JSON.stringify())` просто впаде з помилкою.

---

## Що **не копіюється**

Не підтримує:

- **функції**
- **DOM-елементи**
- **класи / прототипи**
- **Symbol**
- **undefined як ключ**

```javascript
const obj = {
  fn: () => {},
  el: document.body
};

structuredClone(obj);
// Помилка: function or DOM node cannot be cloned
```

---

## Порівняння з іншими способами

| Метод | Тип копії | Копіює вкладені дані | Копіює функції | Копіює Date / Map / Set |
|---|---|---|---|---|
| `{ ...obj }` | поверхнева | Ні | Так | Ні |
| `Object.assign()` | поверхнева | Ні | Так | Ні |
| `JSON.parse(JSON.stringify())` | глибока | Так | Ні | Ні |
| `structuredClone()` | глибока | Так | Ні | Так |
| `_.cloneDeep()` (Lodash) | глибока | Так | Ні | Так |

---

## Підтримка

Працює:

- у всіх сучасних браузерах (Chrome 98+, Firefox 94+, Edge 98+, Safari 15.4+)
- у Node.js 17+
- у Deno

Для старих середовищ можна підключити **поліфіл**, наприклад:

```javascript
npm install core-js
```

---

## ПІДСУМОК

| Властивість | `structuredClone()` |
|---|---|
| Тип копії | Глибока |
| Змінює оригінал | Ні |
| Копіює об'єкти, масиви, Map, Set, Date | Так |
| Працює з циклічними посиланнями | Так |
| Копіює функції / DOM-елементи | Ні |
| Безпечний і вбудований | Так |

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

Для рев’юера

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

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