ความแตกต่างระหว่างสำเนาตื้นและสำเนาลึกคืออะไร?

Question

Accepted Answer

Objects are assigned **by reference**, so `b = a` doesn't copy — both point to the same object. A **shallow** copy duplicates the top level but shares nested references; a **deep** copy duplicates everything, fully independent.

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

ออบเจกต์ `address` ที่ซ้อนกันนั้นเป็น **reference เดียวกัน** ในทั้งสอง ดังนั้นการเปลี่ยนแปลงมันจะส่งผลกระทบต่อทั้งสอง

## สร้างสำเนาลึก

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

ตัวเลือกอื่น ๆ และข้อแม้ของพวกมัน:

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

## ทำไมมันจึงสำคัญ

นี่คือแหล่งที่มาหลักของ "ทำไมสถานะของฉันถึงเปลี่ยนไปโดยไม่คาดหมาย?" บัคโดยเฉพาะในReact/Reduxที่คุณต้องไม่เปลี่ยนสถานะ

Spread ใช้ได้ดีเมื่อคุณเปลี่ยนเฉพาะช่องระดับสูง แต่สำหรับการอัปเดตที่ซ้อนกัน คุณต้องคัดลอกระดับที่ซ้อนกันด้วย (`{ ...obj, address: { ...obj.address, city } }`) หรือทำสำเนาลึก