Comprendiendo la copia profunda en JavaScript

Daniel Nieto — Sat, 05 Oct 2024 20:41:30 +0000

JavaScript no necesita presentaciones, es un lenguaje robusto con mucha versatilidad, pero si has trabajado con él, probablemente hayas notado algunos comportamientos inusuales. Uno de ellos es cómo JavaScript maneja las copias de variables, particularmente cuando trabajamos con objetos. En este artículo, exploraremos el concepto de copia profunda y cómo nos ayuda a evitar problemas inesperados al duplicar datos en nuestros programas.

Cuando hacemos una copia de una variable, JavaScript crea un nuevo espacio de memoria y allí guarda el valor copiado; luego, la nueva variable apunta a este nuevo espacio de memoria. Por ejemplo:

x = 5;
y = x;

y está apuntando a un nuevo espacio de memoria, el cual tiene el mismo valor que x, es decir, 5. Visualmente, sería algo como esto:

El concepto anterior se aplica solo a valores primitivos, para los objetos es diferente. Imagina que tenemos los siguientes dos objetos:

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

En el ejemplo anterior, b no tiene su propio espacio de memoria como podríamos esperar; en lugar de eso, b está apuntando al espacio de memoria donde a está guardado.

¿Qué problemas podría causar este comportamiento? Básicamente, si cambias cualquier campo de a o b, ambas variables cambiarán. Ejecuta el siguiente código y verifícalo tú mismo.

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

b.name = 'Morty';

console.log('a: ', a); // a:  { name: 'Morty', lastName: 'Sanchez' }
console.log('b: ', b); // b:  { name: 'Morty', lastName: 'Sanchez' }

¿La solución para esto? Necesitamos hacer una copia profunda para guardar el valor de a en un nuevo espacio de memoria independiente al que b apunta.

const b = JSON.parse(JSON.stringify(a));

De esta manera, estamos forzando a JavaScript a crear un nuevo espacio de memoria al cambiar el formato de Objeto a JSON. Esto se hace utilizando el método stringify, luego el JSON con su propio espacio de memoria se convierte nuevamente en un Objeto con el método parse, por lo que ambas variables permanecen totalmente independientes.

¿Te ha ocurrido alguna vez este extraño comportamiento? Házmelo saber en los comentarios, ¡estaré encantado de leerte!

Understanding Deep Copy in JavaScript

Daniel Nieto — Sat, 27 Jan 2024 03:53:23 +0000

JavaScript doesn’t need presentations; it is an awesome language. If you have been working with it, you probably have noticed some weird behaviors. Once of them is Deep Copy, let’s take a look at this interesting concept

When we do a variable copy JavaScript create a new memory slot and there, is saving the value copied, then the new variable point to this new memory slot. For example:



x = 5;
y = x;

y is pointing to a new memory slot, which have the same value of x, it means, 5. Visually it would be something like this:

What we see before applies only to primitives values, for objects is different. Imagine we have the follow two objects



let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

In before code b doesn’t have its own memory slot as we could expect, instead of that, b is pointing to memory slot where a is saved

What problems could this behaviour cause? Basically, if you change any field of a or b, both variables will changed. Copy the follow code and verify by yourself



let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

b.name = 'Morty';

console.log('a: ', a); // a:  { name: 'Morty', lastName: 'Sanchez' }
console.log('b: ', b); // b:  { name: 'Morty', lastName: 'Sanchez' }

The solution for this? We need to do a deep copy to save the value of a in a new independent memory slot where b will be pointing



const b = JSON.parse(JSON.stringify(a));

In this way, we are forcing JavaScript to create a new memory slot by changing the format from Object to JSON, this is done using the stringify method, then the JSON with its own slot becomes into Object again with parse method, so both variables remain totally independent.

DEV Community: Daniel Nieto

Comprendiendo la copia profunda en JavaScript

Understanding Deep Copy in JavaScript