JS: Объекты
2026-02-26 17:19 Diff
https://ru.hexlet.io/courses/js-objects/lessons/cloning/theory_unit

Клонирование объектов — еще одна часто встречающаяся операция в разработке, особенно во фронтенде. При клонировании создается копия исходного объекта — то есть новый объект, наполненный теми же данными.

В JavaScript клонирование можно эмулировать с помощью Object.assign(). Для этого нужно первым параметром передать пустой объект, а вторым — тот, который нужно клонировать:

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

Клонирование также выполняют с помощью функции clone() библиотеки lodash. Результат выполнения этой функции идентичен примерам выше, но благодаря своему имени, она лучше выражает смысл операции:

Клонирование способами выше не затрагивает вложенные объекты. Они оказываются в новом объекте по ссылке из старого:

Такое клонирование называется поверхностным (shallow copying). Очень важно запомнить, что именно это имеют в виду в JavaScript, когда употребляют термин «клонирование». Поверхностное клонирование подходит для многих ситуаций, но иногда его недостаточно. В таких случаях нужно использовать полное или глубокое клонирование (deep copying).

В JavaScript есть встроенный метод structuredClone(), c помощью которого можно выполнить глубокое копирование объектов:

Библиотека lodash также предоставляет готовую функцию cloneDeep(). Она была распространенным решением проблемы глубокого копирования, пока не появился метод structuredClone().

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