Понятие глубокого копирования​

В JavaScript’e, да и в других языках, часто встречаются ссылочные типы данных, вокруг которых строится одновременно много самых различных полезных хаков и не очень полезных проблем.

Понятие глубокого копирования, на самом-то деле, достаточно простое. Рассмотрим код:

const obj = {
  name: "Denis",
  address: {
    street: 'Lenina',
    apartment: 10
  }
}

const clone = Object.assign({}, obj)

obj.address.street = 'Pushkina'

console.log(clone.address.street) // Pushkina

В данном случае мы получим не ожидаемый для многих вывод в консоль. Связано это с тем, что Object.assign не осуществляет глубокое копирование.

На данный момент в памяти у нас есть три объекта:
— obj
— clone
— obj.address

И, на самом деле, obj.address === clone.address. Этот вложенный объект для obj и clone на самом деле — один и тот же объект в памяти, поскольку Object.assign полностью скопировал только примитивы, а поле address просто перенёс по ссылке.

Для решения этой проблемы можно воспользоваться рекурсивными алгоритмами на основе того же Object.assign для глубокого копирования объекта. Или же, если мы точно знаем какие поля будут в нашем объекте, можем воспользоваться следующим синтаксисом через spread оператор:

const obj = {
  name: "Denis",
  address: {
    street: "Lenina",
    apartment: 10
  }
};

const clone = {
  ...obj,
  address: {
    ...obj.address
  }
};

obj.address.street = "Pushkina";

console.log(clone.address.street); // Lenina

Тут вывод уже будет ожидаемым, поскольку мы вручную пересоздали ссылку на объект в поле address и заполнили его значениями из исходного объекта. Однако стоит быть осторожным при копировании объектов таким способом и помнить, что spread оператор не копирует геттеры и сеттеры, как и Object.assign.

Подобные проблемы и решения также можно увидеть и в контексте массивов.

#javascript #theory #data