В чем разница между мутабельным и иммутабельным объектом?

Разница между мутабельным и иммутабельным объектом

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

Мутабельный объект - изменяемый

Мутабельный объект (mutable) - это объект, который можно изменять после создания. Изменения происходят "на месте" без создания нового объекта.

// Пример мутабельного объекта
const user = {
  name: 'Alice',
  age: 30
};

// Изменяем свойства - объект МУТИРУЕТ
user.age = 31;           // Изменяем существующий объект
user.email = 'alice@example.com'; // Добавляем новое свойство

console.log(user); // { name: 'Alice', age: 31, email: 'alice@example.com' }

Характеристики мутабельных объектов:

• Можно изменять свойства после создания
• Изменения происходят в памяти на месте
• Все ссылки на объект видят изменения
• Потенциально опасно в многопоточных приложениях
• Сложнее отследить изменения

// Опасность мутабельности
const original = { count: 0 };
const reference = original; // Обе переменные указывают на одно место в памяти

reference.count = 1; // Изменяем через reference

console.log(original.count);  // 1 - original ТОЖЕ изменился!
console.log(reference.count); // 1

Иммутабельный объект - неизменяемый

Иммутабельный объект (immutable) - это объект, который НЕЛЬЗЯ изменять после создания. Любое изменение требует создания НОВОГО объекта.

// Примеры иммутабельных объектов в JavaScript
const immutable = Object.freeze({
  name: 'Bob',
  age: 25
});

// Попытка изменения БУДЕТ ПРОИГНОРИРОВАНА (в нестрогом режиме)
immutable.age = 26; // Не работает
console.log(immutable.age); // 25 - осталось прежнее значение

// В строгом режиме выбросит ошибку
'use strict';
immutable.name = 'Charlie'; // TypeError: Cannot assign to read only property 'name'

Характеристики иммутабельных объектов:

• Нельзя изменять после создания
• Любое изменение создает новый объект
• Старые объекты остаются неизменными
• Безопаснее в многопоточных приложениях
• Легче предсказать поведение

Сравнительная таблица

Проблемы с мутабельностью

// Проблема 1: Неожиданные побочные эффекты
const updateUser = (user) => {
  user.age = user.age + 1; // Мутируем входной параметр
  return user;
};

const person = { name: 'Alice', age: 30 };
const updated = updateUser(person);

console.log(person.age); // 31 - ОРИГИНАЛ ТОЖЕ ИЗМЕНИЛСЯ!

// Проблема 2: Сложность отладки
const obj1 = { value: 10 };
const obj2 = obj1;
obj2.value = 20;
console.log(obj1.value); // 20 - WHERE DID THIS CHANGE HAPPEN???

Иммутабельность в React

React ЗАВИСИТ от иммутабельности для отслеживания изменений состояния:

// ❌ Неправильно - мутируем состояние
function Component() {
  const [user, setUser] = useState({ name: 'Alice', age: 30 });

  const handleAgeChange = () => {
    user.age = 31; // МУТИРУЕМ! React может это не заметить
    setUser(user); // React сравнивает ссылку, она не изменилась
  };
  // React может не перерендерить компонент!
}

// ✅ Правильно - создаем новый объект
function Component() {
  const [user, setUser] = useState({ name: 'Alice', age: 30 });

  const handleAgeChange = () => {
    // Создаем НОВЫЙ объект
    setUser({ ...user, age: 31 });
    // Или
    setUser(prev => ({ ...prev, age: prev.age + 1 }));
  };
  // React видит новую ссылку и перерендеривает
}

Способы создания иммутабельных изменений

// 1. Spread оператор для объектов
const original = { name: 'Alice', age: 30 };
const updated = { ...original, age: 31 };

// 2. Object.assign
const updated2 = Object.assign({}, original, { age: 31 });

// 3. Для массивов - spread оператор
const list = [1, 2, 3];
const newList = [...list, 4]; // Новый массив
const withoutFirst = list.slice(1); // Новый массив

// 4. Array методы, которые НЕ мутируют
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // Новый массив
const filtered = numbers.filter(n => n > 1); // Новый массив

// 5. Object.freeze для глубокой иммутабельности (поверхностной)
const frozen = Object.freeze({ user: { name: 'Alice' } });
frozen.user.name = 'Bob'; // СРАБОТАЕТ! (freeze не рекурсивен)

Глубокая иммутабельность

// Для полной иммутабельности нужна глубокая заморозка
const deepFreeze = (obj) => {
  Object.freeze(obj);
  Object.getOwnPropertyNames(obj).forEach(prop => {
    if (obj[prop] !== null && (typeof obj[prop] === 'object' || typeof obj[prop] === 'function')) {
      deepFreeze(obj[prop]);
    }
  });
  return obj;
};

const frozen = deepFreeze({
  user: { name: 'Alice' },
  settings: { theme: 'dark' }
});

frozen.user.name = 'Bob'; // TypeError в strict mode

Мутабельность vs Иммутабельность на практике

// Сценарий: обновляем список постов

// ❌ Мутабельный подход (опасен в React)
function PostList() {
  const [posts, setPosts] = useState([...]);

  const updatePost = (id, newTitle) => {
    const post = posts.find(p => p.id === id);
    post.title = newTitle; // МУТИРУЕМ!
    setPosts(posts); // Не сработает - ссылка не изменилась
  };
}

// ✅ Иммутабельный подход
function PostList() {
  const [posts, setPosts] = useState([...]);

  const updatePost = (id, newTitle) => {
    setPosts(posts.map(p => 
      p.id === id ? { ...p, title: newTitle } : p
    ));
  };
}

Производительность

// Мутабельность быстрее (нет копирования)
const largObj = { /* 1MB объект */ };
largeObj.prop = 'new value'; // Быстро

// Иммутабельность медленнее (копирование)
const updatedObj = { ...largeObj, prop: 'new value' }; // Медленнее

// Решение: использовать специальные библиотеки для оптимизации
// - Immer.js
// - Immutable.js
// - ImmutableX

// Immer пример
const newState = produce(oldState, draft => {
  draft.user.age = 31; // Выглядит как мутация
  // Но Immer создаст новый объект
});

Заключение

Мутабельные объекты можно изменять, иммутабельные - нельзя. В JavaScript объекты мутабельны по умолчанию, но React требует иммутабельного подхода к состоянию для корректной работы. Мутабельность быстрее и проще, но опаснее (побочные эффекты, баги). Иммутабельность медленнее, но безопаснее и предсказуемее. Best practice - использовать иммутабельные обновления состояния в React (spread оператор, map, filter), а для более сложных случаев - библиотеки вроде Immer.js. Помни: в React никогда не мутируй состояние напрямую, всегда создавай новые объекты.