Особенности хранения данных ссылочного типа

Технический фундамент ссылочной модели

Для ссылочных типов важно понимать модель памяти и последствия мутаций:

переменная хранит ссылку на объект/массив/функцию в памяти;
присваивание копирует ссылку, а не создает новую структуру;
мутация видна всем, кто держит ту же ссылку;
=== сравнивает ссылку, а не содержимое;
spread ({ ...obj }, [...arr]) дает поверхностную копию, вложенные ссылки остаются общими.

Ссылочные данные в прикладном коде нужно обновлять либо явно (мутируем), либо безопасно (возвращаем новую структуру), чтобы не ловить «данные поменялись сами».

Почему ссылочный тип часто становится источником багов

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

Ключевой момент: две переменные могут смотреть на один и тот же объект.

Проверь себя: почему изменение user.name через profile может менять user, хотя это "другая" переменная?

Как работает ссылка на объект

const user = { name: 'Anna' };
const profile = user;

profile.name = 'Ira';
console.log(user.name); // Ira

profile = user не создает новый объект, а копирует ссылку.

Смотри, что важно: это не ошибка языка, а нормальная модель ссылочных данных.

Сравнение ссылочных значений

Для объектов и массивов === сравнивает не содержимое, а ссылку.

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b); // false
console.log(a === c); // true

Здесь часто путаются: одинаковые поля не делают объекты "одним и тем же".

Поверхностная копия

Чтобы избежать случайной общей ссылки, делают копию.

const original = { name: 'Anna', age: 20 };
const copy = { ...original };

copy.name = 'Ira';
console.log(original.name); // Anna

Но это поверхностная копия: вложенные объекты все еще могут делить ссылку.

const source = { settings: { theme: 'dark' } };
const clone = { ...source };
clone.settings.theme = 'light';

console.log(source.settings.theme); // light

Проверь себя: почему spread не защищает от мутаций во вложенных структурах?

Мини-сценарий: настройки пользователя

В интерфейсе есть текущие настройки и черновик редактирования.

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

const currentSettings = { theme: 'dark', lang: 'ru' };
const draftSettings = { ...currentSettings };

Смотри, что важно: правильная работа со ссылками защищает UX от "самопроизвольных" изменений.

Частые ошибки новичков

Ожидать, что присваивание объекта делает независимую копию.
Мутировать входной объект внутри функции без предупреждения.
Использовать === для сравнения структур по содержимому.
Игнорировать вложенные ссылки при копировании.

Анти-провал: перед изменением объекта уточняй, это общая ссылка или независимая копия.

Что будет, если изменить входные данные

Если функция получает объект и меняет его поле, внешний код увидит изменение. Если это не запланировано, появится трудный баг "данные изменились сами". Поэтому важно либо явно мутировать (и документировать это), либо возвращать новый объект.

function setTheme(settings, theme) {
  return { ...settings, theme };
}

Проверь себя: что безопаснее для чистой функции - менять входной объект или возвращать новый?

Краткий итог

Ссылочные типы хранятся по ссылке, а не по значению.
Присваивание объекта копирует ссылку, а не содержимое.
=== для объектов сравнивает ссылку, не структуру.
Поверхностная копия не решает проблему вложенных ссылок.
Понимание ссылочной модели критично для предсказуемых обновлений состояния в реальных приложениях.