Les navigateurs ont récemment développé une nouvelle méthode interopérable que vous pouvez appeler sur les tableaux : Array.prototype.with().
Cet article décrit le fonctionnement de cette méthode et explique comment l'utiliser pour mettre à jour un tableau sans modifier le tableau d'origine.
Présentation de Array.prototype.with(index, value)
La méthode Array.prototype.with(index, value) renvoie une copie du tableau sur lequel elle est appelée, avec l'élément index défini sur le nouveau value que vous fournissez.
L'exemple suivant montre un tableau des âges. Vous souhaitez créer une copie du tableau en faisant passer le deuxième âge de 15 à 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)
En détail du code : ages.with(...) renvoie une copie de la variable ages sans modifier le tableau d'origine. ages.with(1, …) remplace le deuxième élément (index = 1). ages.with(1, 16) attribue le deuxième élément à 16.
Voici comment vous avez pu créer une copie du tableau en apportant une modification.
Cela s'avère très utile lorsque vous souhaitez vous assurer que le tableau d'origine reste inchangé. Cet article aborde certains cas d'utilisation. Mais pour l'instant, regardez ce qui se serait produit si vous aviez utilisé la notation entre crochets:
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 🙁)
Comme vous pouvez le voir, la variable ages a également été modifiée dans cet exemple. En effet, lorsque vous attribuez ages = newAges, JavaScript ne copie pas le tableau, mais crée une référence à l'autre tableau. Ainsi, toute modification dans l'un affectera aussi l'autre, car ils pointent tous deux vers le même tableau.
Array.prototype.with() et immutabilité
L'immuabilité est au cœur de nombreux frameworks et bibliothèques frontend, pour n'en citer que quelques-uns: React (et Redux) et Vue
De plus, d'autres bibliothèques et frameworks ne nécessitent pas nécessairement une immuable, mais favorisent l'amélioration des performances: Angular et Lit
Par conséquent, les développeurs devaient souvent utiliser d'autres méthodes qui renvoyaient des copies de tableaux, ce qui compromet la lisibilité du code:
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)
Voici un exemple de Codepen illustrant comment .with() peut être utilisé en combinaison avec useState dans React pour mettre à jour de manière immuable un tableau d'éléments:
Étant donné que la méthode .with() renvoie une copie du tableau, vous pouvez enchaîner plusieurs appels .with() ou même d'autres méthodes de tableau. L'exemple suivant montre comment incrémenter les deuxième et troisième âges du tableau:
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)
Autres nouvelles méthodes immuables
Trois autres méthodes sont récemment devenues interopérables:
Array.prototype.toReversed(), qui inverse le tableau sans modifier le tableau d'origine.Array.prototype.toSorted(), qui trie le tableau sans modifier le tableau d'origine.Array.prototype.toSpliced(), qui fonctionne comme.splice(), mais sans modifier le tableau d'origine.
Selon MDN, ces trois méthodes sont la version copiée de leurs homologues. Ces méthodes peuvent également être utilisées dans les cas où l'immuabilité est attendue ou privilégiée.
Pour conclure, il est plus facile d'obtenir des mises à jour immuables dans JavaScript à l'aide de l'une des quatre méthodes présentées dans cet article. Plus précisément, la méthode .with() facilite la mise à jour d'un seul élément du tableau sans modifier le tableau d'origine.