Di recente i browser hanno acquisito un nuovo metodo interoperabile che puoi chiamare su Arrays:
Array.prototype.with().
Questo articolo spiega come funziona questo metodo e come utilizzarlo per aggiornare un array senza modificare l'array originale.
Introduzione a Array.prototype.with(index, value)
Il metodo Array.prototype.with(index, value) restituisce una copia dell'array su cui viene
chiamato con index impostato sul nuovo value che fornisci.
L'esempio seguente mostra un array di età. Vorresti creare una nuova copia dell'array modificando la seconda età da 15 a 16 anni:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Suddividere il codice: ages.with(...) restituisce una copia della variabile ages
senza modificare l'array originale. ages.with(1, …) sostituisce il secondo elemento (index = 1). ages.with(1, 16) assegna il secondo elemento a 16.
Ecco come hai creato una nuova copia dell'array con una modifica.
Questo è molto utile se vuoi assicurarti che l'array originale rimanga invariato e questo articolo descrive alcuni dei casi d'uso a questo scopo. Ma per ora, dai un'occhiata a cosa sarebbe successo se avessi usato la notazione a parentesi quadra:
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
Come puoi notare, anche la variabile ages è stata modificata in questo esempio. Il motivo è che
quando assegni ages = newAges, JavaScript non copia l'array,
ma crea un riferimento all'altro. Pertanto, qualsiasi modifica in un elemento
influirà anche sull'altro, in quanto entrambe puntano allo stesso array.
Array.prototype.with() e immutabilità
L'immutabilità è il fulcro di molti framework e librerie frontend, tra cui React (e redux) e Vue
Inoltre, altri framework e librerie non richiedono necessariamente l'immutabilità, ma la incoraggiano a migliorare le prestazioni: Angular e Lit
Per questo motivo, spesso gli sviluppatori dovevano usare altri metodi per restituire copie di array che sacrificavano la leggibilità del codice:
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
Ecco un esempio di codepen di come .with() può essere utilizzato in React in combinazione con useState per aggiornare in modo immutabile un array di elementi:
Poiché il metodo .with() restituisce una copia dell'array, puoi concatenare più chiamate .with() o anche altri metodi di array. L'esempio seguente mostra l'incremento della seconda e della terza età dall'array:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Altri nuovi metodi immutabili
Tre altri metodi sono diventati interoperabili di recente:
Array.prototype.toReversed()che inverte l'array senza modificare l'array originale.Array.prototype.toSorted()che ordina l'array senza modificare l'array originale.Array.prototype.toSpliced()che funziona come.splice(), ma senza modificare l'array originale.
Secondo MDN, questi tre metodi sono la versione di copia delle controparti. Questi metodi possono essere utilizzati anche dove l'immutabilità è prevista o preferita.
In conclusione, gli aggiornamenti immutabili possono essere ottenuti più facilmente in JavaScript con uno dei quattro metodi presentati in questo articolo. In particolare, il metodo .with() semplifica l'aggiornamento di un singolo elemento dell'array senza modificare l'array originale.