Tìm hiểu về Closures trong JavaScript

Closures trong JavaScript xảy ra khi một hàm vẫn giữ quyền truy cập vào các biến trong phạm vi từ vựng (lexical scope) của nó, ngay cả sau khi hàm bên ngoài đã kết thúc thực thi. Điều này cho phép các hàm "ghi nhớ" giá trị và duy trì trạng thái.

Sau đây là một ví dụ đơn giản

function outerFunction() {
  let counter = 0; // Local variable

  return function innerFunction() {
    counter++; // Inner function remembers 'counter'
    console.log(counter);
  };
}

const increment = outerFunction(); // Returns innerFunction
increment(); // 1
increment(); // 2
increment(); // 3

Giải thích:

• outerFunction() định nghĩa một biến cục bộ (counter).
• innerFunction() thay đổi giá trị của counter, mặc dù hàm outerFunction đã được thực thi xong!
• Tuy nhiên, innerFunction() vẫn giữ quyền truy cập vào counter nhờ vào cơ chế closure.
• Mỗi lần gọi increment() sẽ cập nhật counter đã được "giữ lại", cho thấy trạng thái được duy trì liên tục.

Closures rất hữu ích để đóng gói logic, duy trì biến riêng tư và tạo các trình xử lý sự kiện (event handler) hiệu quả.

Hy vọng chút kiến thức này sẽ giúp ích đối với các bạn!