Copiar un objeto en JavaScript y modificarlo sin alterar el original

Hace unos días vimos el problema que existe al copiar objetos en JavaScript. El problema se produce porque en JavaScript se copian los objetos por referencia.

Copiar un objeto «a la vieja usanza» en JavaScript

Esto podemos evitarlo de esta forma:

let persona1 = {
    nombre: 'Gorka'
};

let persona2 = {};

function copiar(origen, destino) {
  for (let atributo in origen) {
    if (origen.hasOwnProperty(atributo)) {
      destino[atributo] = origen[atributo];
    }
  }
}

copiar(persona1, persona2);

persona2.nombre = 'Juan';

console.log(persona1.nombre);

Ahora podemos ver que el resultado será «Gorka» porque al modificar persona2 ya no estamos alterando el objeto original al que apunta persona1.

Copiar un objeto en JavaScript con Object.assign()

También podemos usar Object.assign() que tiene una sintaxis como ésta:

Object.assign(objetoDestino, objetoOrigen)

Y el ejemplo quedaría así:

let persona1 = {
nombre: 'Gorka'
};

let persona2 = {};

Object.assign(persona2, persona1);

persona2.nombre = 'Juan';

console.log(persona1.nombre);
console.log(persona2.nombre);

Este método devuelve como resultado el objeto destino así que podríamos hacer también ésto:

let persona1 = {
    nombre: 'Gorka'
};

let persona2 = Object.assign({}, persona1);

persona2.nombre = 'Juan';

console.log(persona1.nombre);
console.log(persona2.nombre);

Ojo, que si algún atributo del objeto es otro objeto éste se copiará por referencia y volveremos al problema inicial.

Deja un comentario