การถอดโครงสร้างออบเจ็กต์ (Object Destructuring) ใน JavaScript

Object Destructuring เป็นไวยากรณ์ที่สะดวกในการแยกค่าจากคุณสมบัติ (properties) ของออบเจ็กต์ไปเก็บในตัวแปรแยกต่างหาก ทำให้โค้ดอ่านง่ายและสะดวกกว่าการเข้าถึงแบบดั้งเดิม

ตัวอย่าง: ถอดโครงสร้างออบเจ็กต์พื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Destructuring</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .sample, .result { font-size: 18px; font-weight: 500; }
        .sample { color: red; }
        .result { color: rebeccapurple; }
        button { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>การถอดโครงสร้างออบเจ็กต์ (Object Destructuring)</h1>
    <div class="sample"></div>
    <div class="result"></div>
    <button class="Btn">คลิกเพื่อถอดโครงสร้าง</button>
    <h3>กดปุ่มด้านบนเพื่อถอดโครงสร้างออบเจ็กต์ข้างต้น</h3>

    <script>
        let sampleEle = document.querySelector(".sample");
        let resultEle = document.querySelector(".result");
        
        let obj = {
            firstName: "Rohan",
            lastName: "Sharma",
            age: 22
        };
        
        sampleEle.innerHTML += "obj = {firstName: 'Rohan', lastName: 'Sharma', age: 22}";
        
        // Object Destructuring - แยกค่าออกมาเป็นตัวแปร
        let { firstName, lastName, age } = obj;
        
        document.querySelector(".Btn").addEventListener("click", () => {
            resultEle.innerHTML += `firstName=${firstName} lastName=${lastName} age=${age}`;
        });
    </script>
</body>
</html>

ผลลัพธ์

ก่อนกดปุ่ม: แสดงออบเจ็กต์ต้นฉบับ
หลังกดปุ่ม: แสดงค่าที่แยกแล้ว firstName=Rohan lastName=Sharma age=22

เทคนิคเพิ่มเติม

1. ตั้งชื่อตัวแปรใหม่

let { firstName: fn, lastName: ln, age: years } = obj;
// fn = "Rohan", ln = "Sharma", years = 22

2. กำหนดค่าเริ่มต้น (Default Values)

let { firstName, lastName, age, country = "Thailand" } = obj;
// country จะมีค่า "Thailand" เพราะไม่มีใน obj

3. ใช้กับพารามิเตอร์ฟังก์ชัน

function greet({ firstName, lastName, age }) {
    console.log(`สวัสดี ${firstName} ${lastName}, อายุ ${age} ปี`);
}
greet(obj); // สวัสดี Rohan Sharma, อายุ 22 ปี