Проверяет понимание глубокого копирования объектов в JavaScript и его отличий от поверхностного копирования при вложенных структурах.
Когда объект имеет вложенные структуры (объекты внутри объектов, массивы объектов), простое копирование через оператор spread или Object.assign создает новый объект, но внутренние ссылки остаются прежними. Это значит, что изменение вложенного свойства в копии изменит и оригинал, что часто приводит к неожиданным багам.
const original = { user: { name: 'Alice', address: { city: 'NYC' } } };
const shallowCopy = { ...original };
shallowCopy.user.address.city = 'LA';
console.log(original.user.address.city); // 'LA' — оригинал изменен!Для полного сохранения исходного значения необходимо рекурсивно скопировать все вложенные объекты. В JavaScript есть несколько способов:
// structuredClone — современный способ
const deepCopy = structuredClone(original);
deepCopy.user.address.city = 'Boston';
console.log(original.user.address.city); // 'NYC' — оригинал не тронут
// Рекурсивная функция для полного контроля
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) return obj.map(deepClone);
const cloned = {};
for (let key in obj) {
cloned[key] = deepClone(obj[key]);
}
return cloned;
}Если объект содержит только сериализуемые данные (строки, числа, массивы, простые объекты), JSON-метод подходит. Если есть Date, Map, Set или другие специальные типы — используйте structuredClone. Для максимальной гибкости (например, нужно сохранить функции) пишите собственную рекурсивную функцию. В реальных проектах глубокое копирование часто применяется при работе с состоянием в Redux, когда нужно избежать мутаций, или при клонировании сложных конфигураций.
Итог: С ростом вложенности обязательно переходите от поверхностного копирования к глубокому, выбирая метод в зависимости от типов данных. Это предотвращает случайные изменения исходных объектов и делает код предсказуемым.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию