Mitä eroa on pintakopiossa ja syvässä kopiossa?

Question

Accepted Answer

Objektit määritetään **viitteen avulla**, joten `b = a` ei kopioi — molemmat osoittavat samaan objektiin. **Pintakopion** kaksinkertaistaa ylimmän tason, mutta jakaa sisäkkäisiä viitteitä; **syvä kopion** kaksinkertaistaa kaiken, täysin riippumaton.

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

Sisäkkäinen `address`-objekti on **sama viite** molemmissa, joten sen muuttaminen vaikuttaa molempiin.

## Syvän kopion tekeminen

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

Muut vaihtoehdot ja niiden varoitukset:

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

## Miksi se on tärkeää

Tämä on "miksi tilani muuttui odottamatta?" -virheiden pääasiallinen lähde, erityisesti React/Redux:ssa, jossa et saa muuttaa tilaa.

Spread on kunnossa, kun muutat vain ylimmän tason kenttiä, mutta sisäkkäisille päivityksille sinun on myös kopioitava sisäkkäinen taso (`{ ...obj, address: { ...obj.address, city } }`) tai tehtävä syvä klooni.