Что такое мутабельность в JavaScript?

Мутабельность (Mutability) в JavaScript — способность изменять данные после создания

Мутабельность (mutability) — это свойство объектов и массивов в JavaScript, позволяющее изменять их содержимое после создания. В отличие от иммутабельных данных, которые нельзя изменять.

Мутабельные типы данных

1. Объекты (Objects)

const user = { name: "John", age: 30 };

// Изменяем свойство - это мутация!
user.name = "Jane";
user.age = 31;

// Добавляем новое свойство
user.email = "jane@example.com";

// Удаляем свойство
delete user.age;

console.log(user);
// { name: "Jane", email: "jane@example.com" }

2. Массивы (Arrays)

const numbers = [1, 2, 3];

// Мутирующие методы:
numbers.push(4);           // Добавляет в конец
numbers.pop();             // Удаляет из конца
numbers.shift();           // Удаляет из начала
numbers.unshift(0);        // Добавляет в начало
numbers.splice(1, 1, 99);  // Удаляет/вставляет элементы
numbers[0] = 999;          // Меняет элемент по индексу

console.log(numbers);
// [999, 2, 3, 4]

Иммутабельные типы данных

Примитивы — иммутабельны по природе:

let name = "John";
name = "Jane"; // Не мутация! Создается новая переменная

let count = 5;
count = 10; // Не мутация! Создается новое значение

// Числа, строки, boolean, undefined, null — всё иммутабельно

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

1. Непредсказуемые побочные эффекты

function updateUser(user) {
  user.name = "Jane"; // Мутируем переданный объект!
  return user;
}

const john = { name: "John", age: 30 };
const updated = updateUser(john);

console.log(john); // { name: "Jane" } - изменился оригинальный объект!

2. Проблемы в React

// ПЛОХО - мутация состояния
function Counter() {
  const [state, setState] = useState({ count: 0 });
  
  const increment = () => {
    state.count++; // Мутируем состояние напрямую!
    setState(state); // React не заметит изменение
  };
  
  return <button onClick={increment}>Count: {state.count}</button>;
}

// ХОРОШО - создаём новый объект
function Counter() {
  const [state, setState] = useState({ count: 0 });
  
  const increment = () => {
    setState({ count: state.count + 1 }); // Новый объект
  };
  
  return <button onClick={increment}>Count: {state.count}</button>;
}

Как избежать мутаций

1. Используй неизменяющие методы массивов

const numbers = [1, 2, 3];

// ПЛОХО - мутирующие методы
numbers.push(4);
numbers.splice(0, 1);

// ХОРОШО - неизменяющие методы
const newNumbers = [...numbers, 4];          // Добавить
const shifted = newNumbers.slice(1);         // Удалить первый
const mapped = numbers.map(n => n * 2);      // Трансформировать
const filtered = numbers.filter(n => n > 1); // Фильтровать

2. Используй Object Spread для объектов

const user = { name: "John", age: 30 };

// ПЛОХО
user.name = "Jane";

// ХОРОШО
const updated = { ...user, name: "Jane" };

// С вложенными объектами
const person = {
  name: "John",
  address: { city: "NYC", zip: 10001 }
};

const updated = {
  ...person,
  address: { ...person.address, city: "LA" }
};

3. Используй методы типа Object.assign (для копирования)

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 999;

console.log(original.a); // 1 - оригинал не изменился
console.log(copy.a);     // 999

4. Библиотеки для иммутабельности

// Immer.js - удобная библиотека для иммутабельных обновлений
import produce from 'immer';

const user = { name: "John", address: { city: "NYC" } };

const updated = produce(user, draft => {
  draft.name = "Jane";          // Пишешь как будто мутируешь
  draft.address.city = "LA";    // Но это сохраняет иммутабельность
});

// Redux и Zustand используют Immer для удобства

Итог

В JavaScript объекты и массивы мутабельны, что может привести к сложным ошибкам. В современной разработке (особенно с React) следует избегать мутаций и работать с иммутабельными обновлениями. Это делает код более предсказуемым, легче отлаживать и оптимизировать.