Aggiornamenti dell'array immutabile con Array.prototype.with

Di recente, i browser hanno adottato un nuovo metodo interoperabile che è possibile richiamare sugli array: Array.prototype.with()

Supporto dei browser

  • Chrome: 110.
  • Edge: 110.
  • Firefox: 115.
  • Safari: 16.

Origine

Questo articolo illustra 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 di cui è chiamata con il index impostato sul nuovo value da te specificato.

L'esempio seguente mostra un array di età. Vuoi creare una nuova copia di l'array cambiando la seconda età da 15 a 16:

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)

Suddivisione del 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 è stato possibile creare una nuova copia dell'array con una modifica.

Ciò è particolarmente utile per assicurarsi che l'array originale rimanga senza modifiche e questo articolo illustra alcuni casi d'uso a questo proposito. Ma per il momento dai un'occhiata a cosa sarebbe successo se avessi utilizzato la notazione tra parentesi:

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 vedere, anche la variabile ages è stata modificata in questo esempio. Ovvero perché quando assegni ages = newAges, JavaScript non copia l'array ma crea un riferimento all'altro array. Quindi, qualsiasi modifica in una influenzano l'altra, in quanto entrambe puntano allo stesso array.

Array.prototype.with() e imutability

L'immutabilità è al centro di molti framework e librerie di frontend, per citare alcune: React (e redux) e Vue

Inoltre, altri framework e librerie non richiedono necessariamente l'immutabilità, incoraggiali per migliorare le prestazioni: Angular e Lit

Spesso gli sviluppatori dovevano usare altri metodi che restituivano copie di array che ha compromesso 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ù elementi .with() o anche altri metodi di array. L'esempio seguente dimostra incrementando la seconda e la 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

Di recente sono diventati interoperabili altri tre metodi:

Questi tre metodi sono, secondo MDN, la versione di copia controparti. Questi metodi possono essere utilizzati anche laddove è prevista l'immutabilità preferito.

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.