Hiểu Về JavaScript Closures — Bí Mật Đằng Sau Những Hàm Thông Minh

Nếu bạn từng gặp trường hợp một hàm “nhớ” được giá trị từ bên ngoài của nó dù hàm đó đã chạy xong, thì xin chúc mừng — bạn đã gặp Closure rồi đó! Đây là một trong những khái niệm quan trọng và mạnh mẽ nhất trong JavaScript, thường được sử dụng trong lập trình nâng cao, callback, và cả trong React Hooks.

1. Closure là gì?

Closure là khả năng của một hàm trong JavaScript có thể “nhớ” và truy cập đến các biến trong phạm vi (scope) mà nó được tạo ra, ngay cả khi phạm vi đó đã kết thúc. Nói cách khác, một closure giúp bạn giữ lại dữ liệu riêng tư cho một hàm mà không làm lộ ra bên ngoài.

2. Ví dụ cơ bản

Hãy xem ví dụ nhỏ dưới đây để hiểu cách hoạt động của closure:

<button id="counterBtn" onclick="increaseCounter()">Tăng giá trị</button>
<p>Giá trị hiện tại: <span id="counter">0</span></p>

<script>
  function createCounter() {
    let count = 0;
    return function() {
      count++;
      return count;
    }
  }

  const counter = createCounter();

  function increaseCounter() {
    document.getElementById('counter').textContent = counter();
  }
</script>

Demo trực tiếp

Tăng giá trị

Giá trị hiện tại: 1

3. Giải thích ngắn gọn

Trong ví dụ trên, hàm createCounter() tạo ra một biến count và trả về một hàm con có thể tăng giá trị đó. Mặc dù createCounter() đã kết thúc, nhưng biến count vẫn được “nhớ” bên trong hàm con — đó chính là closure. Mỗi lần bạn bấm nút, hàm con truy cập lại biến count và tăng nó lên.

4. Ứng dụng của Closures

• Giữ dữ liệu riêng tư mà không cần tạo biến toàn cục.
• Tạo bộ đếm, cache, hoặc lưu trạng thái tạm thời.
• Giúp viết code gọn gàng, tránh xung đột biến.
• Là nền tảng của các khái niệm nâng cao như React Hooks hoặc module pattern.

5. Kết luận

Closures là một trong những “vũ khí bí mật” khiến JavaScript trở nên linh hoạt và mạnh mẽ. Khi bạn hiểu rõ closures, bạn sẽ viết được code gọn hơn, tránh lỗi phạm vi biến, và dễ dàng làm chủ các khái niệm như callback, debounce hay memoization. Hãy thử tự tạo một vài ví dụ tương tự và quan sát cách hàm của bạn “ghi nhớ” dữ liệu nhé!