Apa perbedaan antara salinan dangkal dan salinan mendalam?

Question

Accepted Answer

Objek ditugaskan **dengan referensi**, jadi `b = a` tidak menyalin — keduanya menunjuk ke objek yang sama. Salinan **dangkal** menggandakan tingkat atas tetapi berbagi referensi tersarang; salinan **mendalam** menggandakan semuanya, sepenuhnya independen.

```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` tersarang adalah **referensi yang sama** di keduanya, jadi mutasinya mempengaruhi keduanya.

## Mengapa ini penting

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

Opsi lain dan peringatan mereka:

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

## Mengapa ini penting

Ini adalah sumber utama bug "mengapa status saya berubah tanpa diduga?", terutama di React/Redux di mana Anda tidak boleh memutasi status.

Spread baik-baik saja ketika Anda hanya mengubah bidang tingkat atas, tetapi untuk pembaruan tersarang Anda harus menyalin tingkat tersarang juga (`{ ...obj, address: { ...obj.address, city } }`) atau melakukan klon mendalam.