DEV Community

Cover image for Copiar objetos en JavaScript
Ulises Serrano
Ulises Serrano

Posted on • Updated on

Copiar objetos en JavaScript

Articulo de como copiar objetos en JavaScript y no morir en el intento. Este es un tema relativamente complicado porque hay que tener en cuenta como es que funciona JavaScript y como maneja las referencias de memoria pero una vez que lo entiendas ya no vas a tener problemas.

Supongamos que tenemos un arreglo de productos y necesitamos agregar una nueva propiedad con los impuestos correspondientes para cada producto. Lo primero sería recorrer el arreglo con map ya que lo que sabemos es inmutable esto quiere decir que no afecta al arreglo original.

Arreglo de productos

Bueno pues veamos que pasa, si ejecutamos el siguiente código lo que va a pasar es que tenemos map va a generar un nuevo arreglo y al producto agregamos los impuestos y devolvemos el objeto.

Modificando el objeto del map

Pero cuando revisamos vemos que tanto el arreglo original como el arreglo con los nuevos productos se vio afectado, pero ¿por qué pasa esto?, sencillo es por como JS administra las referencias de memoria para resolver este problema necesitaríamos hacer una copia del objeto.

Error objeto original y copia

Para ello vamos a ocupar la deconstrucción y veamos que resultados obtenemos. Con el deconstructor generamos una copia del objeto y agregamos la nueva propiedad de los impuestos y lo guardamos dentro de una constante para después regresarla como resultado de la función.

Copia de objeto con deconstructor

Ahora tenemos el resultado que necesitamos, y esta bien pero ahora veremos un problema que es común y es el copiado profundo de los objetos. La deconstrucción solo sirve a un nivel, en este caso el primer nivel pero que pasa si modificamos el arreglo de stores en la copia.

Resultado en consola

Bueno si modificamos la copia hecha a través de la deconstrucción con el nuevo objeto y queremos eliminar la ultima tienda disponible dentro del arreglo veremos que pasa.

Modificando arreglo de objeto

También afecto el arreglo del objeto original, ¡PERO QUE CHINGADOS! esto es un error que podemos llegar a cometer, vamos a ver como solucionarlo para que podamos hacer copias profundas de objetos.

Resultado en consola de arreglos

La forma mas sencilla de hacerlo es ocupar la función structuredClone() que es la forma mas moderna de crear una copia profunda de un objeto, esto crea un nuevo espacio de memoria para que no se tengan inconvenientes respecto a las referencias de memoria que vimos con anterioridad.

Copia profunda de un objeto

Esto es solo una forma de hacer copias profundas de forma moderna porque anteriormente también se podía hacer con JSON.stringify() y JSON.parse() pero a veces se tienen ciertos inconvenientes.

Copia de objetos sin error

Si este articulo te gusto o aprendiste algo nuevo te agradecería que me siguieras y compartieras para que mas personas puedan saber de este tema.

Top comments (2)

Collapse
 
loucyx profile image
Lou Cyx

Recomiendo que le pegues una mirada a structuredClone. La tecnica de hacer stringify/parse con JSON tiene varios problemas que structuredClone no tiene.

Saludos!

Collapse
 
ulisesserranop profile image
Ulises Serrano

Genial no lo conocía, actualiza el post para que quede con esta forma más moderna.