Sự khác biệt giữa shallow copy và deep copy là gì?

Question

Accepted Answer

Object được gán **theo tham chiếu**, nên `b = a` không phải sao chép — cả hai trỏ đến cùng một object. Một bản sao **nông (shallow)** nhân bản cấp cao nhất nhưng chia sẻ các tham chiếu lồng nhau; một bản sao **sâu (deep)** nhân bản mọi thứ, hoàn toàn độc lập.

```js
const original = { name: "Ann", address: { city: "NY" } };

// shallow copy: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ độc lập (kiểu nguyên thủy ở cấp cao)
shallow.address.city = "LA";     // ⚠️ CŨNG thay đổi original.address.city — được chia sẻ!

original.address.city; // "LA"  ← bị thay đổi thông qua shallow copy
```

Object `address` lồng nhau là **cùng một tham chiếu** ở cả hai, nên thay đổi nó ảnh hưởng đến cả hai.

## Tạo một deep copy

```js
const deep = structuredClone(original); // hiện đại, built-in, xử lý hầu hết các kiểu
deep.address.city = "Chicago";          // ✅ original không bị động chạm
```

Các lựa chọn khác và những lưu ý của chúng:

```js
JSON.parse(JSON.stringify(obj)); // đơn giản, nhưng MẤT hàm, Date → chuỗi, undefined
// lodash: _.cloneDeep(obj)       // mạnh mẽ, cho các trường hợp phức tạp
```

## Tại sao điều này quan trọng

Đây là một nguồn lỗi hàng đầu của "vì sao state của tôi lại thay đổi bất ngờ?", đặc biệt trong React/Redux nơi bạn không được thay đổi state.

Spread ổn khi bạn chỉ thay đổi các trường cấp cao, nhưng với các cập nhật lồng nhau bạn cũng phải sao chép cấp lồng nhau đó (`{ ...obj, address: { ...obj.address, city } }`) hoặc thực hiện deep clone.