Debido a que los objetos en JavaScript son pasados por referencia, no puedes simplemente copiar usando el =.
Pero no te preocupes, hoy aprenderemos 3 formas en que puedes clonar un objeto 😁
Los objetos son pasados por referencia
Tu primera pregunta podría ser, ¿por qué no puedo usar =?.
Veamos qué pasa si hacemos eso:
Hasta ahora, ambos objetos parecen dar la misma salida. Así que no hay problema, ¿verdad? Pero veamos qué pasa si editamos nuestro segundo objeto:
¡¿QUÉ?! Cambié objeto2 pero ¿por qué también se vio afectado objeto? 🤔
Eso es porque los objetos son pasados por referencia. Así que cuando usas =, se copia el puntero al espacio de memoria que ocupa.
Las referencias no contienen valores, son un puntero al valor en memoria.
Si quieres aprender más sobre esto, puedes revisar este artículo donde se da una explicación más detallada sobre ello.
1. Usando el operador Spread
Usando el operador spread se clonará tu objeto. Ten en cuenta que será una copia superficial.
2. Usando Object.assign
Podemos usar Object.assign que también creará una copia superficial del objeto.
Nota el objeto vacío {} como primer argumento, esto asegurará que no mutes el objeto original 👍
3. Usando JSON
Esta forma es comúnmente muy recomendada ya que hará una copia profunda. Ahora, esta es una forma rápida y sucia de clonar un objeto en profundidad.
Esto funciona, pero tiene sus propios inconvenientes: sólo se clonan correctamente los tipos JSON válidos. Para una solución más robusta, yo recomendaría usar algo como lodash.
Lodash DeepClone vs JSON
Hay que tener en cuenta que hay algunas diferencias entre deepClone y JSON.stringify/parse.
- JSON.stringify/parse sólo funciona con
Number,StringyObjectliterales sin propiedades de función o Símbolo. - deepClone trabaja con todos los tipos, la función y el Symbol se copian por referencia.
Aquí hay un ejemplo:
Además, copiar usando JSON tiene problemas con las dependencias circulares y el orden de las propiedades en el objeto clonado puede ser diferente, pero si no estás usando nada más que JSON válido, este podría ser el enfoque más simple.
Clon superficial vs clon profundo
Cuando se utilizada spread ... para copiar un objeto, sólo estamos creando una copia superficial. Si el array está anidado o es multidimensional, no funcionará. Este es el ejemplo que vamos a utilizar:
Copia superficial
Vamos a clonar nuestro objeto usando spread:
Así que cambiamos nuestro objeto clonado cambiando la ciudad. Veamos el resultado.
Una copia superficial significa que se copia el primer nivel, los niveles más profundos se referencian.
Copia profunda
Tomemos el mismo ejemplo pero aplicando una copia profunda utilizando JSON
Como puedes ver, la copia profunda es una verdadera copia para los objetos anidados. Muchas veces la copia superficial es lo suficientemente buena, no se necesita realmente una copia profunda. Es como una pistola de clavos frente a un martillo. La mayoría de las veces el martillo está perfectamente bien. El uso de una pistola de clavos para algunas pequeñas artesanías es a menudo un caso de exageración, un martillo está muy bien. Se trata de utilizar la herramienta adecuada para el trabajo adecuado 🤓
Rendimiento
Probando el operador Spread vs Object.assign vs Lodash cloneDeep vs JSON, el resultado muestra que el operador Spread es mucho más rápido que todos los demás 🥇, pero ten en cuenta que solo hace una copia superficial! Viendo el lado de la copia profunda (Lodash vs JSON), Lodash tiene mejor performance 💯
Otros Recursos
- Puedes revisar este script que creó Chris Ferdinandi para clonar un objeto o array con vanilla JS, es muy parecido a lo que hace JSON pero con mejor rendimiento. Puedes ver la demo aquí.