Aprende a clonar objetos en JavaScript

#javascript #beginners #vanillajs #tutorial

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.