Closure (Đóng gói) trong JavaScript là gì?

Closure = hàm + môi trường lessical nơi nó được tạo. Hàm con "nhớ" và truy cập được biến của hàm cha sau khi hàm cha đã return. Cơ chế cốt lõi của functional programming, module pattern, private state.

Ví dụ

Hàm add(num) trả về hàm add1(num1) nhớ num:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Closure JS</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: green; }
  </style>
</head>
<body>
  <h1>Closure (Đóng gói) trong JavaScript</h1>
  <div class="result"></div>
  <button class="Btn">THỰC HIỆN CLOSURE</button>
  <h3>Nhấn nút để gọi add(99) trả về hàm, rồi gọi hàm đó với 44</h3>
  <script>
    const resEle = document.querySelector('.result');
    function add(num) {
      return function add1(num1) {
        resEle.innerHTML += `${num} + ${num1} = ${num + num1}`;
      };
    }
    document.querySelector('.Btn').addEventListener('click', () => {
      const storeAdd = add(99); // storeAdd "nhớ" num = 99
      storeAdd(44); // gọi với num1 = 44
    });
  </script>
</body>
</html>

Kết quả

Hiển thị: 99 + 44 = 143.

Ứng dụng: Module pattern, memoization, currying, event handlers giữ state, async callbacks.