JavaScript strucuteredClone Method

TLDR: เมื่อ clone an object ที่มี nested objects แนะนำให้ใช้ global structuredClone method เพื่อทำการ deep clone เพื่อหลีกเลี่ยง bug ที่เกิดจากการ update nested object's properties

เนื่องจาก JavaScript และ TypeScript ไม่ได้ถูกออกแบบมาเป็น Functional Programming Language เราจึงอาจจะพบ bugs จากการ update property ของ nested object ได้ ถ้า shallow clone an object ด้วย spread syntax ...

ตัวอย่าง

let original = {
  address: {
    province: "Bangkok",
    country: "Thailand",
  },
};
let shallowClone = { ...original };
let deepClone = structuredClone(original);

// update province property of the object that original.address points to
original.address.province = "Phuket";

console.log(shallowClone.address.province); // "Phuket"
console.log(deepClone.address.province); // "Bangkok"

จะเห็นว่า shallowClone.address ยังคงชี้ไปที่ object ตัวเดียวกันกับที่ original.address ชี้ไป จึงทำให้ log ออกมาเป็น "Phuket"

ดังนั้น เพื่อหลีกเลี่ยง bug ที่อาจเกิดขึ้น จากการอัพเดต property ของ object ที่ถูกชี้ไปโดย original object

แนะนำให้ใช้ global structuredClone method แทนการใช้ spread syntax (...) ในการ clone object ครับ