Способы клонирования объектов​

В JavaScript объекты являются ссылочным типом данных, из-за чего есть много приколов, но и проблем не меньше. Перед прочтением этого поста лучше прочитать о понятии нечистого объекта. И в этом посте мы разберёмся с тем как всё таки скопировать объект.

Итак, начать стоит с того, что нечистый объект невозможно скопировать. Именно поэтому это понятие так важно в теме копирования.

И переходя к способам, можно сказать, что их несколько основных:
1. Использование синтаксиса Spread оператора
2. Object.assign
3. Через методы глобального объекта JSON
4. Библиотека Lodash

Начать можно с конца, потому что изобретать велосипед не всегда есть смысл. В библиотеке Lodash есть несколько функций для копирования объектов, полностью протестированных и хорошо оптимизированных.

Но так же можно и использовать глобальный объект JSON, а конкретно его методы stringify и parse. Логика такая, что первый метод переводит объект в JSON строку, а второй полностью воссоздаёт его из JSON строки:

const obj = {
 name: "Denis"
}

const clone = JSON.parse(JSON.stringify(obj))

Нюанс заключается лишь в том, что этот способ подходит только для самых примитивных объектов. Такой способ скопирует только примитивы, пропуская типа данных типа Symbol, геттеры, сеттеры, методы и всё, что сложнее строки, числа или boolean. Но для некоторых случаев такого способа более чем достаточно.

Более интересным вариантом является относительно новый синтаксис spread оператора, который копирует объект примерно так же как и вышеописанный способ. Spread оператор работает только с итерабельными объектами и процесс копирования тогда выглядит вот так:

const obj = {
 name: "Denis"
}

const clone = { ...obj }

Тут интересным нюансом является так же то, что spread оператор не копирует геттеры и сеттеры, а также осуществляет лишь поверхностное копирование. Но всё же этот способ прекрасно подойдет для плоских объектов без лишней вложенности.

И финальным, зато самым стабильным, как мне кажется, способом, является использование Object.assign. Это метод объекта, который доставляет свойства из одного объекта в другой. Так же, как и при использовании spread оператора, геттеры и сеттеры перенесены не будут. Выглядеть это может, например, так:

const obj = {
  name: "Denis"
}

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

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

Ну и, конечно же, каждый из способов можно использовать в зависимости от места и задачи, поэтому полезно знать про особенности каждого из них. Хотя в большинстве случаев уже классического spread оператора будет вполне достаточно.

#javascript #data #theory