Copiar un objeto en JavaScript y modificarlo sin alterar el original

En la perla anterior vimos el problema que hay al copiar un objeto 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.


Tags: JavaScript


Y ahora descubre uno de los mejores libros de programación orientada a objetos en PHP.

Apúntate para conseguir capítulos de muestra, recibir el boletín y más información sobre los libros.