Na czym polega kluczowa różnica między typami danych mutowalnymi a niemutowalnymi?

Kluczowa różnica polega na możliwości zmiany wartości obiektu po jego utworzeniu. Typy mutowalne pozwalają na bezpośrednie zmiany, natomiast niemutowalne nie. Przy "zmianie" niemutowalnego obiektu, w rzeczywistości tworzony jest nowy obiekt z nową wartością.

Przykłady:

Typy mutowalne:

• Array
• Object

// Przykład mutowalny (Array)
let mutableArray = [1, 2];
mutableArray.push(3); // Modyfikuje istniejącą tablicę
console.log(mutableArray); // Wyświetli: [1, 2, 3]

// Przykład mutowalny (Object)
let mutableObject = { a: 1 };
mutableObject.b = 2; // Modyfikuje istniejący obiekt
console.log(mutableObject); // Wyświetli: { a: 1, b: 2 }

Typy niemutowalne:

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

// Przykład niemutowalny (String)
let immutableString = "cześć";
immutableString = immutableString + " świat"; // Tworzy nowy łańcuch
console.log(immutableString); // Wyświetli: cześć świat

// Porównanie referencji pokaże różnicę
let str1 = "abc";
let str2 = str1.toUpperCase();
console.log(str1 === str2); // Wyświetli: false

// Przykład niemutowalny (Number)
let immutableNumber = 10;
immutableNumber = immutableNumber + 5; // Tworzy nową wartość liczbową
console.log(immutableNumber); // Wyświetli: 15

Porównanie:

Cecha	Mutowalne	Niemutowalne
Zmiana	Możliwa po utworzeniu	Niemożliwa po utworzeniu
Nowy odnośnik	Pozostaje ten sam	Tworzony jest nowy przy "zmianie"

Zrozumienie tej różnicy jest kluczowe dla przewidywalności kodu, pracy ze stanami (np. w React z Redux) i optymalizacji. Użycie niemutowalnych danych upraszcza debugowanie, umożliwia łatwiejsze funkcje cofania (undo) i optymalizuje renderowanie w frameworkach UI przez prostą porównanie odnośników.