La diferencia entre copia superficial y copia profunda

En esta lección aprenderás la diferencia entre copia superficial y copia profunda para evitar fallos inesperados al duplicar un objeto. Está dirigida a quien busca «copia superficial frente a profunda en JavaScript» o «cómo copiar un objeto en JavaScript».

Una copia superficial duplica solo «el contenedor más externo», dejando los objetos anidados de dentro compartidos con el original. Una copia profunda lo duplica todo hasta el fondo, así que cambiar la copia no afecta a los datos originales. La sintaxis de propagación { ...original } crea una copia superficial, y JSON.parse(JSON.stringify(...)) una copia profunda sencilla.

El código de ejemplo muestra cómo modificar la parte anidada (direccion.ciudad) de shallow, una copia superficial de un objeto llamado original hecha con { ...original }, acaba cambiando también el propio original. En cambio, modificar deep, una copia profunda hecha con JSON.parse(JSON.stringify(original)), no afecta en nada a los datos originales.

El fallo de «creí que lo había copiado, pero los datos originales también cambiaron» es un tropiezo clásico que ocurre sin entender esta diferencia. Al duplicar un objeto, tener presente esta distinción es esencial o se convierte en fuente de fallos inesperados. Cuidado también: una copia profunda con JSON no sirve para datos que contienen funciones o valores undefined.

En el desarrollo real, elegir bien el tipo de copia importa cuando, por ejemplo, editas temporalmente los datos de un formulario pero quieres conservar los originales. Cuanto más dependa una aplicación de la gestión de estado, más importante se vuelve entender esta diferencia.