Как ведут себя объекты при присваивании одной переменной другой?

Определение

Присваивание объекта — операция, которая копирует ссылку на объект, а не создаёт новый объект.

Что происходит при присваивании

Сначала скажем словами: после b = a у вас не два объекта, а один объект и две переменные, которые на него смотрят.

1. Пример “алиаса”

   const a = { count: 0 };
   const b = a;
   
   b.count += 1;
   
   console.log(a.count); // 1
   

2. Переприсваивание меняет только ссылку в переменной

   const a = { count: 0 };
   let b = a;
   
   b = { count: 100 };
   
   console.log(a.count); // 0
   console.log(b.count); // 100
   

Как сделать копию

1. Поверхностная копия (shallow copy) — копируются верхние поля, вложенные объекты остаются ссылками:

   const a = { user: { name: "Ann" }, age: 20 };
   const b = { ...a };
   
   b.age = 21;
   b.user.name = "Bob";
   
   console.log(a.age); // 20
   console.log(a.user.name); // "Bob" (потому что user — общий)
   

2. Глубокая копия (deep copy) — копируется всё дерево (когда это реально нужно):

   const a = { user: { name: "Ann" } };
   const b = structuredClone(a);
   
   b.user.name = "Bob";
   console.log(a.user.name); // "Ann"
   

Где это важно на практике

1. React state:

   • Нельзя делать state.obj.x = 2 и ожидать корректных обновлений.

   • Нужно создавать новый объект: setState(prev => ({ ...prev, obj: { ...prev.obj, x: 2 } })).

2. Redux:

   • Иммутабельность нужна, чтобы изменения были “видны” через новые ссылки.

Вывод

Присваивание объекта создаёт вторую ссылку на тот же объект, поэтому изменения “протекают” между переменными. Если нужна независимость — копируйте объект явно (shallow/deep в зависимости от структуры).