Qual è la differenza chiave tra tipi di dati mutabili e immutabili?

La differenza chiave risiede nella capacità di modificare il valore dell'oggetto dopo la sua creazione. I tipi mutabili consentono modifiche dirette, mentre i tipi immutabili no. Quando si "modifica" un oggetto immutabile, in realtà si crea un nuovo oggetto con un nuovo valore.

Esempi:

Tipi mutabili:

• Array
• Object

// Esempio mutabile (Array)
let mutableArray = [1, 2];
mutableArray.push(3); // Modifica l'array esistente
console.log(mutableArray); // Mostrerà: [1, 2, 3]

// Esempio mutabile (Object)
let mutableObject = { a: 1 };
mutableObject.b = 2; // Modifica l'oggetto esistente
console.log(mutableObject); // Mostrerà: { a: 1, b: 2 }

Tipi immutabili:

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

// Esempio immutabile (String)
let immutableString = "ciao";
immutableString = immutableString + " mondo"; // Viene creata una nuova stringa
console.log(immutableString); // Mostrerà: ciao mondo

// Il confronto delle referenze mostrerà la differenza
let str1 = "abc";
let str2 = str1.toUpperCase();
console.log(str1 === str2); // Mostrerà: false

// Esempio immutabile (Number)
let immutableNumber = 10;
immutableNumber = immutableNumber + 5; // Viene creato un nuovo valore numerico
console.log(immutableNumber); // Mostrerà: 15

Confronto:

Caratteristica	Mutabili	Immutabili
Modifica	Possibile dopo la creazione	Non possibile dopo la creazione
Nuova referenza	Rimane la stessa	Viene creata una nuova al "cambio"

Comprendere questa differenza è fondamentale per la prevedibilità del codice, il lavoro con gli stati (ad esempio, in React con Redux) e l'ottimizzazione. L'uso di dati immutabili semplifica il debug, permette di implementare facilmente funzioni di annullamento (undo) e ottimizza il rendering nei framework UI tramite semplici confronti di riferimenti.