Каква е основната разлика между мутабелните и иммутабелните типове данни?

Основната разлика е в способността да се променя стойността на обекта след създаването му. Мутируемите типове позволяват директна промяна, а немутируемите — не. При "промяна" на немутируем обект, всъщност се създава нов обект с нова стойност.

Примери:

Мутируеми типове:

• 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 рамки чрез просто сравнение на референции.