¿Cuál es la diferencia entre una copia superficial y una copia profunda?

Question

Accepted Answer

Los objetos se asignan **por referencia**, así que `b = a` no copia — ambos apuntan al mismo objeto. Una copia **superficial** duplica el nivel superior pero comparte las referencias anidadas; una copia **profunda** duplica todo, completamente independiente.

```js
const original = { name: "Ann", address: { city: "NY" } };

// shallow copy: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ independent (top-level primitive)
shallow.address.city = "LA";     // ⚠️ ALSO changes original.address.city — shared!

original.address.city; // "LA"  ← mutated through the shallow copy
```

El objeto anidado `address` es la **misma referencia** en ambos, así que mutarlo afecta a los dos.

## Hacer una copia profunda

```js
const deep = structuredClone(original); // modern, built-in, handles most types
deep.address.city = "Chicago";          // ✅ original is untouched
```

Otras opciones y sus advertencias:

```js
JSON.parse(JSON.stringify(obj)); // simple, but LOSES functions, Dates → strings, undefined
// lodash: _.cloneDeep(obj)       // robust, for complex cases
```

## Por qué es importante

Esta es una de las principales causas de errores del tipo "¿por qué cambió mi estado inesperadamente?", especialmente en React/Redux, donde no debes mutar el estado.

El spread está bien cuando solo cambias campos de nivel superior, pero para actualizaciones anidadas debes copiar también el nivel anidado (`{ ...obj, address: { ...obj.address, city } }`) o hacer un clon profundo.