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

Принцип работы с данными без изменения оригинала.

Зачем нужно

Иммутабельные данные предсказуемы: нет неожиданных мутаций. Упрощает отладку, сравнение (React shouldComponentUpdate), откат изменений (undo/redo).

Где используется

  • React state и Redux store
  • Undo/redo функциональность
  • Безопасная передача данных между модулями

Code

// Мутация (плохо)
const arr = [1, 2, 3];
arr.push(4); // изменяет оригинал

// Иммутабельно (хорошо)
const newArr = [...arr, 4];

// Объекты
const user = { name: 'Anton', age: 25 };
const updated = { ...user, age: 26 }; // новый объект

// Вложенные объекты
const state = { user: { name: 'Anton', settings: { theme: 'dark' } } };
const newState = {
  ...state,
  user: {
    ...state.user,
    settings: { ...state.user.settings, theme: 'light' }
  }
};

// Object.freeze — поверхностная заморозка
const config = Object.freeze({ port: 3000, host: 'localhost' });
config.port = 8080; // молча игнорируется (в strict mode — TypeError)

// Иммутабельные методы массивов (ES2023)
[3, 1, 2].toSorted;           // [1, 2, 3]
[1, 2, 3].toReversed;         // [3, 2, 1]
[1, 2, 3].with(1, 99);          // [1, 99, 3]
[1, 2, 3].toSpliced(1, 1, 99);  // [1, 99, 3]

// Для глубокой иммутабельности: Immer, Immutable.js

Связанные темы

Ресурсы