En Javascript se puede clonar objetos de 3 maneras
- Object.assing()
- Spread operator (...)
- 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.
Top comments (1)
Esto me recuerda la diferencia entre "Strict Equality check" y "Deep Equality Check"