Вопрос с собеседования · Frontend

Как скопировать объект в JavaScript и чем поверхностная копия отличается от глубокой?

JuniorОсновы JavaScript
Ещё спрашивают так:
  • Что такое structuredClone?
  • Почему JSON.parse(JSON.stringify()) — плохой способ копирования?
Коротко

Поверхностная копия ({...obj}, Object.assign, [...arr], slice) копирует только верхний уровень — вложенные объекты общие. Глубокая — structuredClone(obj) (встроенная, сохраняет Date, Map, Set, циклические ссылки). JSON-трюк теряет функции, undefined, Date и падает на циклах.

  • В React и Redux состояние обновляют неизменяемо — копируя изменённые уровни
  • structuredClone не копирует функции, DOM-узлы и прототипы классов
  • Присваивание const b = a — не копия, а та же ссылка

А ещё Immer позволяет «мутировать» черновик и получить неизменяемую копию

Подробно

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

Глубокая копия через JSON:

  • функции и undefined пропадают;
  • Date становится строкой, Map и Set — пустыми объектами;
  • NaN и Infinity становятся null;
  • циклические ссылки — исключение.

structuredClone (во всех современных браузерах и Node 17+) решает эти проблемы, но объект теряет класс — получается обычный объект.

Пример

const user = { name: "Аня", address: { city: "Казань" } };

const shallow = { ...user };
shallow.address.city = "Сочи";
user.address.city;            // "Сочи" — вложенный объект общий

const deep = structuredClone(user);
deep.address.city = "Омск";
user.address.city;            // "Сочи" — не изменился

const updated = { ...user, address: { ...user.address, city: "Пермь" } };

Что хотят услышать

  • Различие видов копий.
  • Способы и их ограничения.
  • Связь с иммутабельными обновлениями.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗{...obj} копирует все вложенные объекты, поэтому это глубокая копия
  • ✓Поверхностная копирует верхний уровень, вложенное общее; глубокая — structuredClone
  • ✗JSON.parse(JSON.stringify(obj)) делает полную глубокую копию, сохраняя Date, Map и функции
  • ✗Присваивание const b = a создаёт независимую копию объекта

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования