Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Daniel Nieto
Daniel Nieto

Posted on • Edited on

Comprendiendo la copia profunda en JavaScript

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 decopia 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;
Enter fullscreen modeExit fullscreen mode

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

x point to A2 address and y point to A3 address

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

leta={name:'Rick',lastName:'Sanchez',};letb=a;
Enter fullscreen modeExit fullscreen mode

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 dondea está guardado.

variables a and b point to same A8 address

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

leta={name:'Rick',lastName:'Sanchez',};letb=a;b.name='Morty';console.log('a:',a);// a:  { name: 'Morty', lastName: 'Sanchez' }console.log('b:',b);// b:  { name: 'Morty', lastName: 'Sanchez' }
Enter fullscreen modeExit fullscreen mode

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

constb=JSON.parse(JSON.stringify(a));
Enter fullscreen modeExit fullscreen mode

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étodostringify, luego el JSON con su propio espacio de memoria se convierte nuevamente en un Objeto con el métodoparse, 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!

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
bernardao profile image
Iago
  • Joined
• Edited on• Edited

Gracias por el artículo. Creo que hay una errata en el siguiente párrafo

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.

Debería ser:

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.

CollapseExpand
 
daniel1775 profile image
Daniel Nieto
Hi dear community. I am Daniel a frontend developer and tech enthusiastic. I really enjoy to discover new things to improve my vision about
  • Location
    Colombia
  • Joined
• Edited on• Edited

Tienes razón, gracias por la observación

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hi dear community. I am Daniel a frontend developer and tech enthusiastic. I really enjoy to discover new things to improve my vision about
  • Location
    Colombia
  • Joined

More fromDaniel Nieto

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp