Copiar objetos en JavaScript

#javascript #programming #spanish

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.

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.

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.

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.

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.

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.

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.

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.

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.