Aprende a clonar objetos en JavaScript

En Javascript se puede clonar objetos de 3 maneras

1. Object.assing()
2. Spread operator (...)
3. JSON

Usando Object.assign()

let persona = { "nombre": "Ali", "apellido": "Sequeira", "edad": 21 }; let clonarPersona = Object.assign({},persona); 

Usando Spread(...)

let persona = { "nombre": "Ali", "apellido": "Sequeira", "edad": 21 }; let clonarPersona = { ...persona }; 

Usando JSON

let persona = { "nombre": "Ali", "apellido": "Sequeira", "edad": 21 }; let clonarPersona = JSON.parse(JSON.stringify(persona)); 

Cual es la diferencia?

Tanto spread como Object.assign estan realizando algo llamado Shallow copy mientras que JSON realiza Deep copy
Que quiere decir esto? se refiere a la manera en la que javascript "clono" el objeto.

Observa este ejemplo:

 let usuario = { nombre: "Ali Sequeira", ocupacion: "Desarrollador", favoritos: { pelicula: "Kill Bill", comida: "Hamburguesas" } }; let usuario2 = Object.assign({}, usuario); usuario2.favoritos.pelicula = "Down of the dead"; /* Ooops! :C espera que paso? */ console.log(usuario.favoritos.pelicula) //"Down of the dead" 

como puedes observar los valores en ambos objetos cambiaron, la rason de esto es porque Object.assign() o spread operator solo realiza shallow copy del objeto fuente. si los valores de la fuente almacena una referencia a un objeto esa referencia tambien es copiada. Es decir algunos valores siguen conectados al objeto original. Esto no pasa con "nombre" o "ocupacion" ya que al ser valores primitivos en este caso cadenas de texto(strings) no pueden ser mutados.

Ahora intentemos con JSON

 let usuario = { nombre: "Ali Sequeira", ocupacion: "Desarrollador", favoritos: { pelicula: "Kill Bill", comida: "Hamburguesas" } }; let usuario2 = JSON.parse(JSON.stringify(usuario)); usuario2.favoritos.pelicula = "Down of the dead"; /* WUJU! todo sigue igual! */ console.log(usuario.favoritos.pelicula) //"Kill Bill" 

Porque utilizando JSON no sucede esto? bueno basicamente estamos utilizando "deep" copy que viene siendo lo contrario a shallow copy, los valores estan desconectados del objeto original debido a la sintaxis con la que se escribe utilizando las funciones JSON.stringify que transforma objetos a cadenas de texto(strings) y JSON.parse que hace la inversa, transformando las cadenas de texto(string) a objetos.