"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Comprendiendo la copia profunda en JavaScript

Comprendiendo la copia profunda en JavaScript

Publicado el 2024-11-01
Navegar:819

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:

Comprendiendo la copia profunda en JavaScript

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, a está apuntando al espacio de memoria donde a está guardado.

Comprendiendo la copia profunda en JavaScript

¿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!

Declaración de liberación Este artículo se reproduce en: https://dev.to/daniel1775/comprendiendo-la-copia-profunda-en-javascript-2oon?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3