Почему мутабельные типы данных так названы?

Определение мутабельности

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

Мутабельные типы называются именно так, потому что они могут изменяться (mutate) после инициализации - вы можете модифицировать их значение без создания нового объекта в памяти.

Мутабельные типы в JavaScript

К мутабельным (изменяемым) типам относятся объекты и массивы:

// Объект - мутабельный тип
const user = { name: "Иван", age: 25 };
user.age = 26; // Изменяем существующий объект
user.email = "ivan@example.com"; // Добавляем новое свойство

console.log(user); // { name: "Иван", age: 26, email: "ivan@example.com" }

// Массив - мутабельный тип
const numbers = [1, 2, 3];
numbers[0] = 10; // Изменяем элемент
numbers.push(4); // Добавляем элемент

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

Обратите внимание: переменная user и numbers остаются одним и тем же объектом в памяти (один и тот же адрес в памяти), но их содержимое изменилось.

Иммутабельные типы в JavaScript

К иммутабельным (неизменяемым) типам относятся примитивные типы:

// Строка - иммутабельный тип
let text = "Привет";
text = text + " мир"; // Создаёт НОВУЮ строку
// Старая строка "Привет" осталась в памяти неизменной

// Число - иммутабельный тип
let count = 5;
count = count + 1; // Переменная указывает на НОВОЕ число
// Старое значение 5 остаётся неизменным

// Boolean - иммутабельный тип
let isActive = true;
isActive = false; // Переменная указывает на новое значение

Почему это важно в фронтенде?

Различие между мутабельными и иммутабельными типами критично при работе с React и функциональном программировании:

// Неправильно - мутация исходного массива
function addItem(items, newItem) {
  items.push(newItem); // Меняем исходный массив!
  return items;
}

const myList = [1, 2, 3];
const updated = addItem(myList, 4);
// myList теперь [1, 2, 3, 4] - побочный эффект!

// Правильно - создаём новый массив
function addItem(items, newItem) {
  return [...items, newItem]; // Новый массив через spread
}

const myList = [1, 2, 3];
const updated = addItem(myList, 4);
// myList остался [1, 2, 3], updated = [1, 2, 3, 4]

Мутация в React

React работает с иммутабельным подходом для отслеживания изменений:

// Неправильно - React может не заметить изменение
const [user, setUser] = useState({ name: "Иван" });

function updateName() {
  user.name = "Петр"; // Мутация!
  setUser(user); // React может не перерисовать компонент
}

// Правильно - создаём новый объект
function updateName() {
  setUser({ ...user, name: "Петр" }); // Новый объект
}

Практический пример: копирование объектов

Поверхностная копия (shallow copy) мутабельных типов:

const original = { a: 1, b: { c: 2 } };

// Неправильно - это всё ещё один и тот же объект
const copy1 = original;
copy1.a = 100;
console.log(original.a); // 100 - мутировали исходный!

// Поверхностная копия - копируются только свойства верхнего уровня
const copy2 = { ...original };
copy2.a = 100; // Не влияет на original
copy2.b.c = 200; // Влияет! Вложенный объект остался прежним

// Глубокая копия - полностью независимая копия
const copy3 = JSON.parse(JSON.stringify(original));
copy3.b.c = 200; // Исходный original не затрагивается

История и терминология

Термин "мутабельность" пришёл из функционального программирования, где это ключевое различие между парадигмами:

• Функциональное программирование - иммутабельность везде
• Объектно-ориентированное программирование - мутабельность объектов

JavaScript поддерживает оба подхода, но современный фронтенд тяготеет к иммутабельному стилю благодаря React, Redux и функциональным библиотекам.

Итак, мутабельные типы называются так потому, что они мутируют (изменяются) на месте, в отличие от иммутабельных, которые создают новые значения при "изменении".