Qual é a diferença entre uma cópia superficial e uma cópia profunda?

Question

Accepted Answer

Os objetos são atribuídos **por referência**, então `b = a` não copia — ambos apontam para o mesmo objeto. Uma cópia **superficial** duplica o nível superior, mas compartilha referências aninhadas; uma cópia **profunda** duplica tudo, completamente independente.

```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
```

O objeto `address` aninhado é a **mesma referência** em ambos, então mutá-lo afeta ambos.

## Criando uma cópia profunda

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

Outras opções e seus advertências:

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

## Por que isso importa

Esta é uma fonte principal de bugs "por que meu estado mudou inesperadamente?", especialmente em React/Redux, onde você não deve mutar o estado.

Spread é bom quando você apenas altera campos de nível superior, mas para atualizações aninhadas você deve copiar o nível aninhado também (`{ ...obj, address: { ...obj.address, city } }`) ou fazer um clone profundo.