В чем заключается ключевое отличие между мутабельными и имутабельными типами данных?

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

Примеры:

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

• Array
• Object

// Мутабельный пример (Array)
let mutableArray = [1, 2];
mutableArray.push(3); // Изменяем существующий массив
console.log(mutableArray); // Выведет: [1, 2, 3]

// Мутабельный пример (Object)
let mutableObject = { a: 1 };
mutableObject.b = 2; // Изменяем существующий объект
console.log(mutableObject); // Выведет: { a: 1, b: 2 }

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

• String
• Number
• Boolean
• null
• undefined
• Symbol
• BigInt

// Имутабельный пример (String)
let immutableString = "привет";
immutableString = immutableString + " мир"; // Создается новая строка
console.log(immutableString); // Выведет: привет мир

// Сравнение ссылок покажет разницу
let str1 = "abc";
let str2 = str1.toUpperCase();
console.log(str1 === str2); // Выведет: false

// Имутабельный пример (Number)
let immutableNumber = 10;
immutableNumber = immutableNumber + 5; // Создается новое числовое значение
console.log(immutableNumber); // Выведет: 15

Сравнение:

Признак	Мутабельные	Имутабельные
Изменение	Возможно после создания	Невозможно после создания
Новая ссылка	Остается прежней	Создается новая при "изменении"

Понимание этого отличия критично для предсказуемости кода, работы с состояниями (например, в React с Redux) и оптимизации. Использование имутабельных данных упрощает отладку, позволяет легче реализовывать функции отмены (undo) и оптимизировать рендеринг в UI-фреймворках за счет простого сравнения ссылок.