Closure và ứng dụng của nó trong dự án javascript

Closure trong JavaScript là một tính năng đặc biệt cho phép một hàm truy cập và thao tác với các biến được khai báo trong phạm vi ngoài hàm đó, ngay cả khi hàm đó đã được gọi xong. Nói cách khác, closure là sự kết hợp giữa một hàm và môi trường (scope) mà hàm đó được tạo ra.

Cách hoạt động của closure:

• Khi một hàm được tạo ra, nó không chỉ có quyền truy cập vào các biến trong phạm vi của chính nó, mà còn có thể truy cập vào các biến của phạm vi bên ngoài (trong đó nó được khai báo).

• Khi hàm con được trả về và gọi bên ngoài phạm vi của nó, nó vẫn giữ lại quyền truy cập vào các biến bên ngoài mà nó đã tham chiếu đến.

Ví dụ đơn giản về closure:

function outer() {
  let count = 0; // biến "count" trong phạm vi của hàm outer

  return function inner() {
    count++; // hàm inner có thể truy cập và thay đổi biến "count" của outer
    console.log(count);
  }
}

const counter = outer(); // outer trả về hàm inner
counter(); // in ra 1
counter(); // in ra 2
counter(); // in ra 3

Ở ví dụ trên:

• Hàm outer tạo ra một biến count và trả về một hàm inner.

• Hàm inner có thể truy cập vào biến count mặc dù outer đã hoàn thành việc thực thi và không còn tồn tại trong bộ nhớ.

• Mỗi lần gọi counter(), giá trị của count được tăng lên, và closure giữ lại giá trị đó giữa các lần gọi.

Ví dụ thực tế của closure trong ứng dụng:

Giả sử bạn muốn tạo một hàm ghi nhớ số lần người dùng đã nhấn vào nút trong ứng dụng web:

function createButtonClickCounter() {
  let clickCount = 0;

  return function() {
    clickCount++;
    console.log(`Button clicked ${clickCount} times`);
  };
}

const buttonCounter = createButtonClickCounter();
document.querySelector('button').addEventListener('click', buttonCounter);

Ở ví dụ này:

• Hàm createButtonClickCounter trả về một hàm con (buttonCounter), và mỗi khi người dùng nhấn nút, hàm con này sẽ cập nhật biến clickCount.

• Dù sự kiện click diễn ra bất kỳ lúc nào, closure vẫn giữ lại và cập nhật giá trị của clickCount giữa các lần nhấn nút.

Closure rất hữu ích trong các trường hợp như:

• Tạo các hàm callback hoặc event handler.

• Thực hiện dữ liệu ẩn (data hiding) trong các mô hình lập trình.

• Quản lý trạng thái trong ứng dụng mà không cần phải sử dụng các biến toàn cục.