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

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

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

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

Контент

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

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

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

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

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

## Коротко

| Тип копіювання | Що робить | Вкладені об'єкти |
|---|---|---|
| **Поверхневе (shallow copy)** | Копіює **тільки верхній рівень** властивостей | Зберігаються **посилання** на оригінальні об'єкти |
| **Глибоке (deep copy)** | Копіює **все дерево цілком** (включно з вкладеними об'єктами) | Створює **нові копії** всіх вкладених структур |

---

## Приклад поверхневого копіювання

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

const clone = { ...user }; // поверхнева копія

clone.address.city = 'Lviv';

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

Чому так сталося:

- `{ ...user }` копіює тільки **перший рівень властивостей**;
- `address` - це об'єкт, і в копії зберігається **те саме посилання** на нього;
- зміна `clone.address.city` зачепила оригінал.

---

## Приклад глибокого копіювання

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

const clone = structuredClone(user); // глибока копія

clone.address.city = 'Lviv';

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

Тут створюється **повністю незалежна копія**:
усі вкладені об'єкти теж скопійовані заново.

---

## Ілюстрація (проста аналогія)

Уяви:

```javascript
user ──► address ──► { city: 'Kyiv' }
clone ─┘   ↑
           └── (те саме посилання)
```

У поверхневій копії обидві змінні "вказують" на той самий внутрішній об'єкт.

А при глибокому копіюванні:

```javascript
user ──► address1 ─► { city: 'Kyiv' }
clone ─► address2 ─► { city: 'Lviv' }
```

Це **два повністю незалежних об'єкти**.

---

## Як зробити глибоке копіювання

| Метод | Глибоке копіювання | Особливості |
|---|---|---|
| `structuredClone(obj)` | Так | Сучасний, зберігає типи |
| `JSON.parse(JSON.stringify(obj))` | Так | Втрачає функції, `Date`, `undefined` |
| `_.cloneDeep(obj)` (lodash) | Так | Найнадійніший і крос-платформний |

---

## Підсумок

| Властивість | **Поверхневе копіювання** | **Глибоке копіювання** |
|---|---|---|
| Копіює тільки верхній рівень | Так | Ні |
| Копіює вкладені об'єкти | Ні (посилання) | Так |
| Зміни у вкладених даних впливають на оригінал | Так | Ні |
| Приклади | `{ ...obj }`, `Object.assign()` | `structuredClone()`, `_.cloneDeep()` |

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

Для рев’юера

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

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