Понимание глубокого и поверхностного копирования в JavaScript

JavaScript, как и большинство языков программирования, имеет механизмы для создания повторяющихся значений или копирования информации. В этой статье мы рассмотрим два основных способа создания копий JavaScript: глубокое и поверхностное копирование.

Копирование переменной с примитивным типом данных, таким как строка или число, довольно прямолинейно, но может стать немного сложным, когда дело доходит до копирования итерируемых объектов.

Что такое итерируемый объект?

Итерируемый объект — это просто что-нибудь в JavaScript, через которое можно выполнить цикл — и объекты, и массивы являются итерируемыми.

Технически массив в javascript имеет тип данных объекта, но мы не будем вдаваться в подробности в этой статье.

Вот пример объекта JavaScript, с которым мы будем работать:

const person = {
  name: "Jacob Khan",
  age: 23,
  address: {
    street: "123 Main Street",
    city: "New York",
    state: "NY",
  }
};

Поверхностное копирование

Если бы мы хотели использовать оператор распространения (...) для копирования нашего объекта person. Синтаксис может выглядеть так:👆

const copiedPerson = { ...person };

Довольно легко, правда? Теперь давайте немного отредактируем. Изменение свойства age нашего скопированного объекта не повлияет на исходные данные person:

copiedPerson.age = 33;

Хороший! Но что, если мы изменим state внутри свойства address?

copiedPerson.address.state = "CA";

Ой! Если вы проверите исходный объект person, вы обнаружите, что state также обновился в исходном объекте.

Это связано с тем, что оператор распространения создает мелкую копию объекта, углубляясь только на один уровень. Для вложенных свойств или элементов он просто копирует ссылку, а не фактические вложенные объекты.

Решение: глубокое копирование

Глубокое копирование, как следует из названия, копирует объект более тщательно. Он копирует не только свойства верхнего уровня, но и дублирует все нижние, вложенные…