Actualizaciones de arrays inmutables con Array.prototype.with

Recientemente, los navegadores adquirieron un nuevo método interoperable al que puedes llamar en arrays: Array.prototype.with()

Navegadores compatibles

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

Origen

En este artículo, se explora cómo funciona este método y cómo usarlo para actualizar un array. sin mutar el array original.

Introducción a Array.prototype.with(index, value)

El método Array.prototype.with(index, value) muestra una copia del array en el que se encuentra. llama con el index configurado en el nuevo value que proporcionas.

En el siguiente ejemplo, se muestra un array de edades. Te gustaría crear una nueva copia de el array mientras se cambia la segunda edad de 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)

Desglosar el código: ages.with(...) muestra una copia de la variable ages. sin modificar el array original. ages.with(1, …) reemplaza el segundo elemento. (index = 1) ages.with(1, 16) asigna el segundo elemento a 16.

Así es como pudiste crear una nueva copia del array con una modificación.

Esto es muy útil cuando quieres asegurarte de que el array original permanezca sin cambios, y este artículo abarca algunos de sus casos de uso. Pero, por ahora, Veamos lo que habría sucedido si hubieras utilizado la notación con corchetes:

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 🙁)

Como puedes ver, la variable ages también se modificó en este ejemplo. Eso es ya que, cuando asignas ages = newAges, JavaScript no copia el array, pero más bien crea una referencia a la otra matriz. Por lo tanto, cualquier cambio en una afectan al otro, ya que ambas apuntan al mismo array.

Inmutabilidad y arrays.prototype.with()

La inmutabilidad es la base de muchas bibliotecas de frontend y frameworks algunos: React (y redux) y Vue.

Además, otras bibliotecas y frameworks no necesitan necesariamente inmutabilidad, pero Incentivarlas para que obtengan un mejor rendimiento: Angular y Lit

Por lo tanto, los desarrolladores a menudo tenían que usar otros métodos que mostraban copias de arrays. lo que sacrificaba la legibilidad del código:

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)

Este es un CodePen de ejemplo de cómo se puede usar .with() en React en conjunto. con useState para actualizar de manera inmutable un array de elementos:

Dado que el método .with() muestra una copia del array, puedes encadenar varios Llamadas a .with() o incluso otros métodos de array El siguiente ejemplo demuestra aumentando la segunda y tercera edad a partir del 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)

Otros métodos inmutables nuevos

Recientemente, otros tres métodos se volvieron interoperables:

Estos tres métodos, según MDN, son la versión de copia de su equivalentes. Estos métodos también pueden usarse cuando se espera inmutabilidad o de tu preferencia.

En conclusión, las actualizaciones inmutables se pueden lograr con mayor facilidad en JavaScript con uno de los cuatro métodos que se presentan en este artículo. Específicamente: El método .with() facilita la actualización de un solo elemento del array. sin mutar el array original.