Copiar objetos en JavaScript

1. Copia superficial de un objeto en JavaScript
2. Copia profunda de un objeto en JavaScript

Varios lenguajes de programación tienen varias estructuras de datos que le permiten organizar y almacenar los datos en la memoria. Cada una de las estructuras de datos funciona de forma única. Por ejemplo, en C++ y Java, tenemos Hashmap para almacenar los datos en forma de clave-valor. De manera similar, en JavaScript, tenemos una estructura de datos llamada objeto que le permite almacenar los datos en un formato de valor-clave.

Los objetos son útiles a la hora de acceder a los datos. Podemos acceder fácilmente a cualquier dato dentro de un objeto usando su clave. En este artículo, veremos las diversas formas en que podemos copiar objetos en JavaScript.

Tenga en cuenta que los objetos de JavaScript son mutables y se almacenan como referencia. Si ya ha creado un objeto y le gustaría asignarlo a algún otro objeto, ese objeto ahora contendrá la dirección de este objeto. Dado que estamos almacenando la referencia del objeto dentro de otro objeto, luego utilizando este nuevo objeto, podemos alterar fácilmente los valores presentes dentro del objeto original.

var a = {'name': 'Adam', 'company': 'Google'}

var b = a;
b.name = 'Sam'

console.log(a.name, b.name);

Producción :

Sam Sam

Como puede ver en el ejemplo anterior, la asignación de un objeto a otro no copiará el objeto en sí. Solo almacenará la dirección del objeto antiguo en el nuevo objeto.

Hay dos formas de copiar un objeto en JavaScript. Una forma se llama copia superficial y otra forma se llama copia profunda. Para implementar estas formas, podemos hacer uso de algunos métodos de JavaScript de la siguiente manera.

Copia superficial de un objeto en JavaScript

En la copia superficial, solo los pares clave-valor presentes en el primer nivel del objeto se copiarán al nuevo objeto. Y todos los elementos o propiedades anidados, como un array u otro objeto dentro, no se copiarán y en cambio, su referencia se almacenará en este objeto.

En la copia superficial, algunas de las propiedades del objeto original también se ven afectadas. Para comprender esto, consulte el siguiente ejemplo.

var obj1 = {
  'firstName': 'James',
  'lastName': 'Bond',
  'films': ['No Time To Die', 'Spectre', 'Skyfall', 'Quantum of Solace'],
  'actors':
      {'characters': {'realName': 'Daniel Craig', 'fakeName': 'James Bond'}}
}

En este ejemplo, tenemos un objeto llamado obj1. Para copiar superficialmente este objeto usando JavaScript, podemos usar Object.assign() y el operador de propagación .... Realicemos una copia superficial en el obj1 usando los siguientes métodos en JavaScript.

1. Método Object.assign()

El método Object.assign() toma dos parámetros. El primer parámetro es el objeto destino que se devolverá una vez realizada la copia. El segundo parámetro es el objeto que queremos copiar: obj1. En nuestro caso, pasaremos un objeto vacío {} como objetivo. Esto se debe a que todos los elementos dentro del obj1 se copiarán a este objeto vacío. Una vez realizada la copia, el Object.assign() devolverá el nuevo objeto que almacenaremos dentro de la variable obj2.

var obj2 = Object.assign({}, obj1);

Posteriormente modificaremos las propiedades de este objeto, y veremos prácticamente por qué a esto se le llama copia superficial.

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

console.log(obj1);
console.log(obj2);

Producción:

Aquí, cambiamos tres valores usando el obj2, firstName, la primera película del array films[] y la propiedad realName del objeto actors.characters. Entonces estamos imprimiendo ambos objetos.

La imagen de arriba muestra que solo la propiedad firstName no se cambia en ambos objetos. Las otras dos propiedades, films[] y realName se modifican en ambos objetos. Esto se llama copia superficial ya que la propiedad firstName es única, mientras que las otras propiedades son comunes para ambos objetos, ya que estamos almacenando la dirección aquí. Aquí, las propiedades presentes en el primer nivel solo se copian.

2. Operador de propagación (...)

El operador rest copiará las propiedades del obj1 en obj2. Esto es similar a Object.assign(), donde copiamos superficialmente las propiedades de los objetos. Para copiar un objeto usando el operador de extensión, debe escribir el nombre del objeto después del símbolo de extensión.

var obj2 = {...obj1};

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

También obtendrá el mismo resultado que obtuvimos después de usar el método Object.assign().

Copia profunda de un objeto en JavaScript

En una copia en profundidad, todos los pares clave-valor se copiarán al nuevo objeto. Para realizar una copia profunda, podemos usar los métodos JSON.parse() y JSON.stringify(). Tenga en cuenta que la copia profunda no copiará las propiedades presentes dentro del objeto prototipo.

Usando el JSON.stringify(), primero convertiremos el objeto completo, en este caso obj1, en una cadena, y luego, con la ayuda del método JSON.parse(), analizaremos esta cadena de nuevo en el formato JSON.

let obj2 = JSON.parse(JSON.stringify(obj1));

Aquí, puede modificar cualquier propiedad dentro del obj2, lo que no afectará las propiedades dentro del obj1.

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

Producción:

Estamos modificando los mismos valores que modificábamos anteriormente, y ahora puedes notar que cuando estamos cambiando las propiedades del obj2, no está afectando las propiedades del obj1.