Recientemente, los navegadores adquirieron un nuevo método interoperable al que puedes llamar en arrays:
Array.prototype.with()
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:
Array.prototype.toReversed()
que revierte el array sin mutar el array original.Array.prototype.toSorted()
que ordena el array sin mutando el array original.Array.prototype.toSpliced()
que funciona como.splice()
, pero sin mutar el array original.
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.