На каком уровне оператор spread копирует объект?

Уровень копирования оператора spread

Оператор ... (spread) в JavaScript выполняет поверхностное копирование (shallow copy). Это фундаментальное свойство, которое важно понимать для корректной работы с объектами и массивами.

Что такое поверхностное копирование?

Поверхностное копирование означает, что:

• Копируются только значения примитивных типов (string, number, boolean, null, undefined, symbol, bigint)
• Для свойств-объектов (включая массивы, функции, даты и другие объекты) копируются ссылки, а не сами объекты

const original = {
  name: 'Иван',
  address: {
    city: 'Москва',
    street: 'Тверская'
  },
  hobbies: ['чтение', 'спорт']
};

const copy = { ...original };

// Изменение примитивного значения в копии НЕ влияет на оригинал
copy.name = 'Петр';
console.log(original.name); // 'Иван' - не изменилось

// Изменение вложенного объекта в копии ВЛИЯЕТ на оригинал
copy.address.city = 'Санкт-Петербург';
console.log(original.address.city); // 'Санкт-Петербург' - изменилось!

// Изменение вложенного массива в копии ВЛИЯЕТ на оригинал
copy.hobbies.push('музыка');
console.log(original.hobbies); // ['чтение', 'спорт', 'музыка'] - изменилось!

Глубокое vs поверхностное копирование

Когда использовать spread, а когда глубокое копирование?

Используйте spread, когда:

• Объект не содержит вложенных структур
• Вы осознанно хотите использовать общие ссылки на вложенные объекты
• Нужно быстро создать новый объект с несколькими изменениями

// Хороший случай для spread - простые объекты
const user = { name: 'Анна', age: 25, isActive: true };
const updatedUser = { ...user, age: 26, isActive: false };

// Плохой случай для spread - объекты со сложной структурой
const complexData = {
  config: { theme: 'dark', language: 'ru' },
  items: [{ id: 1 }, { id: 2 }]
};
// ❌ Проблема - config и items будут общими ссылками
const badCopy = { ...complexData };

Методы глубокого копирования

Когда нужна полная независимость копии от оригинала:

// 1. JSON методы (имеет ограничения - не копирует функции, undefined, цикличные ссылки)
const deepCopy1 = JSON.parse(JSON.stringify(original));

// 2. StructuredClone API (современный способ)
const deepCopy2 = structuredClone(original);

// 3. Рекурсивная функция
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  
  const cloned = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
}

Практические рекомендации

1. Всегда проверяйте структуру объекта перед использованием spread
2. Для React/Redux state часто требуется глубокое копирование при обновлении состояния
3. Используйте линтеры и TypeScript, которые могут предупреждать о потенциальных проблемах с мутациями
4. Рассмотрите иммутабельные библиотеки (Immer, Immutable.js) для работы со сложными структурами

Важные исключения и нюансы

// Spread с массивами - также поверхностное копирование
const matrix = [[1, 2], [3, 4]];
const matrixCopy = [...matrix];
matrixCopy[0][0] = 99;
console.log(matrix[0][0]); // 99 - оригинал изменился!

// Spread не копирует прототип и дескрипторы свойств
class Animal {
  speak() { return 'Звук'; }
}
const animal = new Animal();
const animalCopy = { ...animal };
console.log(animalCopy.speak); // undefined - метод потерялся

Вывод: Оператор spread — это мощный инструмент для поверхностного копирования, который отлично подходит для работы с плоскими структурами данных. Однако при работе с вложенными объектами необходимо либо осознанно принимать совместное использование ссылок, либо применять методы глубокого копирования. Понимание этого различия критически важно для предотвращения трудноуловимых багов, связанных с непреднамеренными мутациями данных.