การกำหนดค่าด้วยการถอดโครงสร้าง (Destructuring Assignment) ใน JavaScript

Destructuring Assignment เป็นไวยากรณ์พิเศษที่ช่วยให้สามารถแยกคุณสมบัติของออบเจ็กต์หรือค่าของอาร์เรย์ แล้วมอบหมายให้กับตัวแปรต่างๆ ได้ในบรรทัดเดียว ทำให้โค้ดกระชับและอ่านง่ายขึ้น

ตัวอย่าง: Destructuring กับอาร์เรย์และออบเจ็กต์

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Destructuring Assignment</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>Destructuring Assignment ใน JavaScript</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 arr = [2, 3, 4, 5];
        let obj = {
            firstName: "Rohan",
            lastName: "Sharma"
        };
        
        sampleEle.innerHTML = "arr = " + arr + "<br>";
        sampleEle.innerHTML += "obj = {firstName: 'Rohan', lastName: 'Sharma'}";
        
        // Array Destructuring
        let a, b;
        [a, b] = arr; // a=2, b=3 (ค่าที่เหลือถูกละทิ้ง)
        
        // Object Destructuring
        let { firstName, lastName } = obj;
        
        document.querySelector(".Btn").addEventListener("click", () => {
            resultEle.innerHTML = `a=${a} b=${b} <br>`;
            resultEle.innerHTML += `firstName=${firstName} lastName=${lastName}`;
        });
    </script>
</body>
</html>

ผลลัพธ์

ก่อนกดปุ่ม: แสดงอาร์เรย์และออบเจ็กต์ต้นฉบับ
หลังกดปุ่ม: แสดง a=2 b=3 และ firstName=Rohan lastName=Sharma

รูปแบบการใช้งานที่นิยม

1. ข้ามค่าบางค่าในอาร์เรย์

let [first, , third] = [1, 2, 3];
// first = 1, third = 3

2. ใช้ Rest Operator (...)

let [first, ...rest] = [1, 2, 3, 4, 5];
// first = 1, rest = [2, 3, 4, 5]

3. สลับค่าตัวแปร (Swap Variables)

let x = 10, y = 20;
[x, y] = [y, x];
// x = 20, y = 10

4. คืนค่าหลายค่าจากฟังก์ชัน

function getUser() {
    return { name: "Somchai", age: 25, city: "Bangkok" };
}
let { name, age } = getUser();