Apakah perbezaan antara salinan cetek dan salinan dalam?

Question

Accepted Answer

Objek diberikan **mengikut rujukan**, jadi `b = a` tidak menyalin — kedua-duanya menunjuk ke objek yang sama. **Salinan cetek** menduplikasi peringkat teratas tetapi berkongsi rujukan bersarang; **salinan dalam** menduplikasi semuanya, sepenuhnya bebas.

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

Objek `address` bersarang adalah **rujukan yang sama** dalam kedua-duanya, jadi mengubahnya mempengaruhi kedua-duanya.

## Membuat salinan dalam

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

Pilihan lain dan amaran mereka:

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

## Mengapa ia penting

Ini adalah sumber utama bagi pepijat "mengapa keadaan saya berubah tanpa diduga?", terutamanya dalam React/Redux di mana anda tidak boleh mengubah keadaan.

Spread baik apabila anda hanya mengubah medan peringkat teratas, tetapi untuk kemas kini bersarang anda mesti menyalin peringkat bersarang juga (`{ ...obj, address: { ...obj.address, city } }`) atau lakukan klona mendalam.