DEV Community

loading...

Aprende a clonar objetos en JavaScript

Ali Sequeira
I’m passionate about Javascript’s ecosystem.
・2 min read

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);
Enter fullscreen mode Exit fullscreen mode

Usando Spread(...)

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

let clonarPersona = {
  ...persona
 };
Enter fullscreen mode Exit fullscreen mode

Usando JSON

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

let clonarPersona = JSON.parse(JSON.stringify(persona));
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
billiramirez profile image
Billi Ramirez

Esto me recuerda la diferencia entre "Strict Equality check" y "Deep Equality Check"