Quelle est la différence entre une copie superficielle et une copie profonde ?

Question

Accepted Answer

Les objets sont assignés **par référence**, donc `b = a` ne copie pas — les deux pointent vers le même objet. Une copie **superficielle** duplique le niveau supérieur mais partage les références imbriquées ; une copie **profonde** duplique tout, entièrement indépendant.

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

L'objet `address` imbriqué est la **même référence** dans les deux, donc le muter affecte les deux.

## Effectuer une copie profonde

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

D'autres options et leurs mises en garde :

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

## Pourquoi c'est important

C'est la source principale des bugs « pourquoi mon état a-t-il changé de manière inattendue ? », en particulier dans React/Redux où vous ne devez pas muter l'état.

Le spread fonctionne bien quand vous ne modifiez que les champs de niveau supérieur, mais pour les mises à jour imbriquées, vous devez également copier le niveau imbriqué (`{ ...obj, address: { ...obj.address, city } }`) ou effectuer un deep clone.