> Что такое поверхностное и глубокое копирование объектов в JavaScript (JavaScript)

Короткий ответ

Поверхностное копирование (shallow copy) создаёт новый объект, но его вложенные объекты остаются ссылками на оригинал. Глубокое копирование (deep copy) рекурсивно копирует все уровни вложенности, создавая полностью независимую копию. В JavaScript для поверхностного копирования используют Object.assign() или spread-оператор, для глубокого - structuredClone(), JSON.parse(JSON.stringify()) или библиотеки типа Lodash.

Подробное объяснение

Разница между этими типами копирования проявляется при работе с вложенными структурами данных. При поверхностном копировании изменяя вложенный объект в копии, вы меняете его и в оригинале, так как копия содержит ссылки на те же внутренние объекты. Глубокое копирование создаёт полностью независимую копию на всех уровнях вложенности.

В JavaScript примитивные типы (числа, строки, булевы) всегда копируются по значению. Объекты, массивы и функции - по ссылке. Поверхностное копирование копирует только первый уровень, а для вложенных объектов сохраняет ссылки. Глубокое копирование рекурсивно обходит всю структуру и создаёт новые объекты для каждого уровня.

На практике

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

structuredClone() - современный нативный способ глубокого копирования, поддерживающий большинство типов данных, включая Date, Map, Set, ArrayBuffer. JSON.parse(JSON.stringify()) имеет ограничения: не копирует функции, undefined, Symbol, специальные объекты, теряет прототипы. Для production-кода с нестандартными типами лучше использовать библиотеки.

Пример кода

JAVASCRIPT
// Исходный объект
const original = {
  name: 'Alice',
  address: {
    city: 'Moscow',
    street: 'Tverskaya'
  },
  hobbies: ['reading', 'coding']
};

// Поверхностное копирование
const shallowCopy = { ...original };
shallowCopy.address.city = 'SPb';
shallowCopy.hobbies.push('gaming');

console.log(original.address.city); // 'SPb' - изменилось!
console.log(original.hobbies); // ['reading', 'coding', 'gaming'] - изменилось!

// Глубокое копирование
const deepCopy = structuredClone(original);
deepCopy.address.city = 'Kazan';
deepCopy.hobbies.push('swimming');

console.log(original.address.city); // 'SPb' - не изменилось
console.log(original.hobbies); // ['reading', 'coding', 'gaming'] - не изменилось

Как отвечать на собеседовании

Начни с чёткого определения обоих понятий. Приведи пример, демонстрирующий разницу в поведении с вложенными объектами. Перечисли основные способы реализации: spread-оператор и Object.assign() для поверхностного, structuredClone() и JSON.parse(JSON.stringify()) для глубокого. Упомяни ограничения JSON.parse(JSON.stringify()) и когда стоит использовать библиотеки. Покажи понимание, что выбор зависит от задачи и структуры данных.

Что проверяет интервьюер

Понимание ссылочной модели JavaScript и разницы между примитивами и объектами. Умение предсказать поведение кода при мутации копий. Знание нативных методов копирования и их ограничений. Практический опыт работы с вложенными структурами данных. Понимание trade-off между производительностью и корректностью копирования.

Типичные ошибки

Путаница между копированием по значению и по ссылке для примитивов и объектов. Использование JSON.parse(JSON.stringify()) для объектов с функциями, undefined, Symbol или циклическими ссылками. Предположение, что spread-оператор делает глубокое копирование. Забывание, что методы массивов вроде slice() и concat() делают поверхностное копирование. Игнорирование производительности при глубоком копировании больших структур.