JavaScript Closure คืออะไร พร้อมตัวอย่าง

Closure คือ ความสามารถของ Inner Function ที่เข้าถึงตัวแปรของ Outer Function ได้ แม้ Outer Function จบการทำงานแล้ว ก็ตาม

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript Closure</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; }
  </style>
</head>
<body>
  <h1>JavaScript Closures</h1>
  <div style="color: green;" class="result"></div>
  <button class="Btn">CLICK HERE</button>
  <h3> Click to add two numbers using closure </h3>
  <script>
    let resEle = document.querySelector(".result");
    function add(num) {
      return function add1(num1) {
        resEle.innerHTML += `${num}+${num1} = ${num + num1}<br>`;
      };
    }
    document.querySelector(".Btn").addEventListener("click", () => {
      let storeAdd = add(99);
      storeAdd(44);
      storeAdd(11); // ใช้ซ้ำได้ เพราะ closure จำค่า num=99 ไว้
    });
  </script>
</body>
</html>

คำอธิบาย

• add(99) คืนค่า Function add1 ที่ "จำ" ค่า num = 99 ไว้ (Closure)
• storeAdd(44) เรียก Function นั้น ส่ง num1 = 44 คำนวณ 99+44
• สามารถเรียก storeAdd หลายครั้งได้ ค่า num ยังคงเป็น 99

ประโยชน์ของ Closure

• Data Encapsulation (Private Variables)
• Function Factories
• Callbacks & Event Handlers
• Memoization

ผลลัพธ์

กดปุ่มครั้งแรก: "99+44 = 143" | กดอีกครั้ง: เพิ่ม "99+11 = 110" (ค่า 99 ยังคงอยู่)