Jitrak Blog

Wrong Purpose Destructuring

ใช้งาน Destructuring ผิดวัตถุประสงค์

11 May 2025 14:55

Written by: Yosapol Jitrak

ช่วงก่อนหน้านี้ผมได้ไปเจอ Project นึงมา หลังจากนี้จะใช้ชื่อว่า Project A เพราะน่าจะมาเขียนได้อีกหลายบทความ โดยมี Legacy code ที่มีการใช้ destructuring แบบที่มันไม่ควรจะเป็นมาครับ ลองไปดูตัวอย่างกันครับ

interface MyChild {
  property: string;
}

interface MyObjectA {
  child: MyChild;
}

interface MyObjectB {
  child: MyChild;
}

async function execute(): Promise<MyObjectA> {
  const objectA: MyObjectA | undefined = await fetchMyObjectA();
  const objectB: MyObjectB | undefined = await fetchMyObjectB();
  // Do a lot of things
  const { child } = { ...objectA, ...objectB };
  // Do something with child
}

เน้นตรงนี้ครับ

const { child } = { ...objectA, ...objectB };

จากตัวอย่างคือ อ่าน Code มีโอกาสที่ objectA หรือ objectB มีค่าเป็น undefined แต่ถ้าตัวนึงมีค่า อีกตัวจะเป็น undefined เสมอ ตอนเจอครั้งแรกผมงงว่ามันทำอะไรอยู่ ต้องไปไล่ Code ตรงที่ Comment ว่า Do a lot of things กับ Do something with child ครับ ซึ่ง Function ที่ว่านี้ยาวเกือบพันบรรทัด

คราวนี้ลองมาดูว่าถ้าเขียนแบบนี้จะอ่านง่ายกว่าไหมนะ

const child = objectA?.child || objectB?.child;

ทำไมต้อง Destructuring หลายรอบ ถ้าเขียนแบบนี้น่าจะอ่านง่ายกว่า และดูจะมีประสิทธิภาพมากกว่า

ไว้จะมาต่อบทความหน้า เรื่องของ Project A ยังมีอีกเพียบให้เล่าครับ

ภาคต่อ:
Link: Don’t use ternary like this
Link: Ultimate Join