Aggiornamenti dell'array immutabile con Array.prototype.with

Jad Joubran

Novità : questa funzionalità web è ora disponibile in tutti e tre i principali motori del browser.

I browser hanno recentemente acquisito un nuovo metodo interoperabile che puoi chiamare sugli array: Array.prototype.with().

Browser Support

• 110
• 110
• 115
• 16

Source

Questo articolo illustra il funzionamento di questo metodo e come utilizzarlo per aggiornare un array senza modificarne l'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à. Vuoi creare una nuova copia dell'array modificando 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)

Analisi 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.

In questo modo hai potuto creare una nuova copia dell'array con una modifica.

Questa funzionalità è molto utile quando vuoi assicurarti che l'array originale rimanga invariato. Questo articolo illustra alcuni casi d'uso. Ma, per ora, 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, in questo esempio è stata modificata anche la variabile ages. Questo perché quando assegni ages = newAges, JavaScript non copia l'array, ma crea un riferimento all'altro array. Pertanto, qualsiasi modifica apportata a uno influirà anche sull'altro, poiché entrambi puntano allo stesso array.

Array.prototype.with() e immutabilità

L'immutabilità è al centro di molte librerie e framework frontend, tra cui React (e Redux) e Vue.

Inoltre, altre librerie e framework non richiedono necessariamente l'immutabilità, ma la incoraggiano per migliorare le prestazioni: Angular e Lit

Pertanto, gli sviluppatori dovevano spesso utilizzare altri metodi che restituivano copie di array a scapito della 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à dell'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:

• Array.prototype.toReversed() che inverte l'array senza modificarlo.
• 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 rispettive controparti. Questi metodi possono essere utilizzati anche nei casi in cui è prevista o preferita l'immutabilità.

In conclusione, gli aggiornamenti immutabili possono essere ottenuti più facilmente in JavaScript con uno dei quattro metodi presentati in questo articolo. Nello specifico, il metodo .with() semplifica l'aggiornamento di un singolo elemento dell'array senza modificare l'array originale.