Crear una copia profunda en JavaScript

Cuando se necesita hacer una copia de un objeto o array en JavaScript se puede recurrir a los métodos assign() o slice(). El problema de estos métodos es que solamente realizar copias superficiales. Así cuando el objeto que se está copiando contiene objetos realzan una asignación de estos objetos a los nuevos, por lo que se obtiene una copia, sino que una referencia. En esta entrada vamos a ver métodos para una copia profunda en JavaScript, copiando también los objetos dentro de otros objetos.

Copiar un vector con slice()

Al utilizar el operador asignación en JavaScript para copiar un objeto lo que realmente se hace es asignar el objeto a la nueva variable. Nunca se hace una copia. Es decir, se para a tener dos referencias de un mismo objeto en memoria. De este modo, si se modifica el contenido del objeto en una de las variables el mismo cambio también se va a observar en la copia.

En el caso de los vectores posiblemente uno de los métodos más utilizados para realizar una copia del contenido es slice(). Con lo que se obtiene dos objetos diferentes en memoria. En el siguiente ejemplo se muestra como funciona la copia de un vector mediante el operador asignación y el método slice().

En Analytics Lane

Los récords con asterisco, o la épica del titular sin contexto – El bestiario de los indicadores económicos absurdos (parte 8 y final)

const vector = [1, 2, 3];

const vectorAssignment = vector;
const vectorSlice = vector.slice();

vector[0] = 0;

console.log(vector)
console.log(vectorAssignment)
console.log(vectorSlice)

[ 0, 2, 3 ]
[ 0, 2, 3 ]
[ 1, 2, 3 ]

Aquí se puede ver cómo al utilizar el operador asignación no se obtiene una copia, sino que un acceso al mismo objeto. Por otro lado el método slice() sí que devuelve un nuevo objeto.

Copiar un vector con assing()

Otra alternativa para obtener una copia de un vector es utilizar el método assing(). Este requiere crear primero un objeto para asignar posteriormente el contenido del objeto original. Al igual que slice() este método crear un objeto nuevo, lo que se puede ver en el siguiente ejemplo.

const vector = [1, 2, 3];

const vectorAssignment = vector;
const vectorAssign = [];
Object.assign(vectorAssign, vector);

vector[0] = 0;

console.log(vector)
console.log(vectorAssignment)
console.log(vectorAssign)

[ 0, 2, 3 ]
[ 0, 2, 3 ]
[ 1, 2, 3 ]

Obteniéndose el mismo resultado que se ha visto con el método slice().

Copia de vectores con objetos en su interior

Los vectores de JavaScript pueden contener no solamente tipos de datos primitivos, sino que otro tipo de objetos. Por ejemplo, se pueden contener vectores para cuando lo que se desea es representar una matriz. En este caso los métodos assign() o slice() solamente realizan una copia superficial de los datos, como se puede ver en el siguiente ejemplo.

const nestedVectors = [[1], [2], [3]];

const nestedVectorsAssignment = nestedVectors;
const nestedVectorsSlice = nestedVectors.slice();
const nestedVectorsAssign = [];
Object.assign(nestedVectorsAssign, nestedVectors);

nestedVectors[0][0] = 0;
nestedVectors[1] = [-1];

console.log(nestedVectors)
console.log(nestedVectorsAssignment)
console.log(nestedVectorsSlice)
console.log(nestedVectorsAssign)

[ [ 0 ], [ -1 ], [ 3 ] ]
[ [ 0 ], [ -1 ], [ 3 ] ]
[ [ 0 ], [ 2 ], [ 3 ] ]
[ [ 0 ], [ 2 ], [ 3 ] ]

Un ejemplo en el que se puede observar que los objetos dentro del vector no son copiados, sino que asignados al nuevo objeto. Para modificar el contenido de un objeto interno sin modificar las copias es necesario modificar estos. Algo que no se desea realizar en la mayoría de las situaciones.

Copia profunda en JavaScript de vectores

En JavaScript un método para realizar una copia profunda de los vectores, es decir, hacer una copia exacta del vector y su contenido, es convirtiendo el vector en una cadena de texto y volviéndola a transformar en objeto. Algo que se muestra en el siguiente ejemplo.

const nestedVectors = [[1], [2], [3]];

const nestedVectorsAssignment = nestedVectors;
const nestedVectorsDeep= JSON.parse(JSON.stringify(nestedVectors));

nestedVectors[0][0] = 0;
nestedVectors[1] = [-1];

console.log(nestedVectors)
console.log(nestedVectorsAssignment)
console.log(nestedVectorsDeep)

[ [ 0 ], [ -1 ], [ 3 ] ]
[ [ 0 ], [ -1 ], [ 3 ] ]
[ [ 1 ], [ 2 ], [ 3 ] ]

En este caso se puede ver cómo al modificar el contenido del vector original no se ve afectado el contenido de la copia. Lo que se busca al hacer una profunda en JavaScript de los objetos.

Copia profunda en JavaScript de diccionarios

A la hora de trabajar con diccionarios las copias que se realizan utilizando el método assign() (en los diccionarios no existe el método slice()) tienen el mismo problema. La copia que se obtiene es superficial y no profunda. Para obtener una copia profunda del diccionario se puede utilizar el mismo truco que con los vectores.

const dict = {a:[1], b:[2], c:[3]};

const dictAssignment = dict;
const dictAssign = {};
Object.assign(dictAssign, dict);
const dictDeep = JSON.parse(JSON.stringify(dict));

dict.a[0] = 0;
dict.b = [-1];

console.log(dict)
console.log(dictAssignment)
console.log(dictAssign)
console.log(dictDeep)

{ a: [ 0 ], b: [ -1 ], c: [ 3 ] }
{ a: [ 0 ], b: [ -1 ], c: [ 3 ] }
{ a: [ 0 ], b: [ 2 ], c: [ 3 ] }
{ a: [ 1 ], b: [ 2 ], c: [ 3 ] }

Conclusiones

En esta entrada se ha visto que los métodos assign() o slice() realiza copias superficiales de los objetos. Si estos contienen solamente datos primitivos no es un problema, pero si cuando estos contienen a su vez otros objetos. Lo que es un problema cuando se desea obtener una autentica copia de los objetos. Para solucionar este problema se ha visto cómo realizar copias profundas en JavaScript.

Imágenes: Pixabay (Martin Pyško)