3 formas de actualizar un arreglo de objetos en JavaScript

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 9 months ago

Javascript ofrece diferentes formas de manipular un arreglo. Una de estas manipulaciones es la necesidad de modificar el contenido de uno de los items de un arreglo, para ello podemos hacer uso de métodos mutables, como utilizar acceso por indice o método inmutables como el uso de la función Array.map o una combinación de Array.findIndex y Array.slice

Matías Hernández: [0:00] En JavaScript podemos actualizar el contenido de un arreglo de objetos. Utilizaremos esta pequeña función para crear objetos random utilizando la galería faker.

[0:08] Un método para actualizar el contenido del arreglo es utilizar el acceso mediante índice del arreglo, pero este método es un método mutable ya que modifica el arreglo original. Podemos utilizar formas inmutables para el mismo objetivo, como la función map.

[0:26] Map itera sobre el arreglo mediante el uso de una función de callback que permite el acceso a cada uno de sus ítems. Map crea un nuevo arreglo con el contenido retornado por la función de callback.

[0:38] En este caso, utilizamos un bloque condicional para, en caso de que el id del ítem sea 3, actualizar sólo su propiedad name utilizando object spread. En caso contrario retornamos el mismo ítem.

[0:52] Otra forma de actualizar el contenido de uno de los ítems sin conocer su índice es utilizando la función findIndex. Además utilizaremos la función array.slice como función auxiliar para evitar mutar al arreglo original. FindIndex permite utilizar una función de prueba y retornará al índice el elemento que cumple con la función de prueba utilizada.

[1:11] Luego de obtener el índice, podemos crear un nuevo ítem utilizando object spread y así modificar sólo la propiedad name para luego crear un nuevo arreglo utilizando array.slice para obtener dos porciones del arreglo, una antes y otra después del índice, y nuevamente utilizando array spread crearemos un nuevo arreglo.

[1:32] En resumen, JavaScript ofrece diversas formas de actualizar un arreglo de objetos, algunos métodos mutables y otros inmutables.