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

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

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

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

Контент

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

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

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

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

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

## 1. **Поверхневе копіювання (shallow copy)**

Створює новий об'єкт, але **вкладені об'єкти копіюються за посиланням**.

---

### Спосіб 1: Spread (`...`)

```javascript
const user = { name: 'Tim', age: 25 };
const clone = { ...user };

console.log(clone); // { name: 'Tim', age: 25 }
console.log(clone === user); // false
```

Швидко, зручно і сучасно.
Але вкладені структури (об'єкти, масиви) залишаються **посиланнями** на оригінал:

```javascript
const user = { name: 'Tim', address: { city: 'Kyiv' } };
const clone = { ...user };

clone.address.city = 'Lviv';
console.log(user.address.city); // "Lviv" (вплив на оригінал)
```

---

### Спосіб 2: `Object.assign()`

```javascript
const user = { name: 'Tim', age: 25 };
const clone = Object.assign({}, user);

console.log(clone); // { name: 'Tim', age: 25 }
```

Аналог spread, теж **поверхнева копія**.

---

### Спосіб 3: Через цикл (ручний спосіб)

```javascript
const clone = {};
for (const key in user) {
  if (user.hasOwnProperty(key)) {
    clone[key] = user[key];
  }
}
```

Старомодний, але працює навіть у старих браузерах.

---

## 2. **Глибоке копіювання (deep copy)**

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

---

### Спосіб 1: `structuredClone()` (сучасний і безпечний)

```javascript
const user = {
  name: 'Tim',
  address: { city: 'Kyiv', zip: 12345 }
};

const clone = structuredClone(user);

clone.address.city = 'Lviv';

console.log(user.address.city); // "Kyiv"
```

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

- вкладені об'єкти, масиви, дати, Map, Set тощо;
- не копіює функції і прототипи (вони втрачаються).

---

### Спосіб 2: Через `JSON.parse(JSON.stringify())`

```javascript
const user = { name: 'Tim', address: { city: 'Kyiv' } };
const clone = JSON.parse(JSON.stringify(user));

clone.address.city = 'Lviv';
console.log(user.address.city); // "Kyiv"
```

Працює майже всюди, але:

- функції, `undefined`, `Symbol`, `Date`, `Map`, `Set` і `BigInt` **втрачаються**;
- може бути повільним на великих структурах.

---

### Спосіб 3: Бібліотеки (lodash, Ramda тощо)

```javascript
import _ from 'lodash';

const clone = _.cloneDeep(user);
```

Найнадійніший спосіб для складних структур -
зберігає типи, вкладеність і працює швидко.

---

## ПІДСУМОК

| Тип копії | Спосіб | Копіює вкладені об'єкти? | Зберігає типи (`Date`, `Map`, `Set`)? |
|---|---|---|---|
| Поверхнева | `{ ...obj }`, `Object.assign()` | Ні | Так |
| Глибока | `structuredClone()` | Так | Так |
| Глибока (старий спосіб) | `JSON.parse(JSON.stringify())` | Так | Ні |
| Глибока (надійна) | `_.cloneDeep()` | Так | Так |

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

Для рев’юера

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

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