Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Клонирование (копирование) JS: Объекты

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

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

const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };

// данные из user копируются во вновь созданный объект
const copyOfUser = Object.assign({}, user);

user === copyOfUser; // false

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

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

import _ from 'lodash';

const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };
const copyOfUser = _.clone(user);

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

const user = { company: { name: 'Hexlet' } };
const copyOfUser = Object.assign({}, user);
// Это тот же объект
user.company === copyOfUser.company; // true

user.company.createdAt = 2012;
console.log(copyOfUser.company.createdAt); // 2012

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

В JavaScript нет встроенного способа клонировать объекты полностью. Поэтому у разработчиков принято использовать готовую функцию cloneDeep() из библиотеки lodash.

import _ from 'lodash';

const user = { company: { name: 'Hexlet' } };
const copyOfUser = _.cloneDeep(user);

user.company === copyOfUser.company; // false

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
20 октября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
20 октября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»