Closure Là Gì Trong JavaScript ? 5 Ví Dụ Về Closure Dễ Hiểu Nhất

Khái niệm closure trong Javascript là một khái niệm thường rất hay được hỏi khi các bạn đi phỏng vấn lập trình. Vậy nó là cái gì ? Các ví dụ liên quan của nó để giúp chúng ta dễ hiểu nhất. Hãy cùng xem bài viết bên dưới nhé

Nội dung

Closure là gì ?

Trong JavaScript, Một Closure – dịch tiếng việt là (Đóng gói), được tạo khi một hàm được xác định trong một hàm khác (hàm ngoài) và có quyền truy cập vào các biến từ phạm vi của hàm ngoài, ngay cả sau khi hàm ngoài đã thực thi xong. Điều này cho phép hàm bên trong “đóng lại” hoặc nắm bắt các biến của hàm bên ngoài, do đó có thuật ngữ “đóng”.
Một ví dụ của closure

function outerFunction(x) {
  // Inner function defined within the outer function
  function innerFunction(y) {
    return x + y; // innerFunction has access to the 'x' variable from the outer scope
  }

  return innerFunction;
}

const closureExample = outerFunction(10);
console.log(closureExample(5)); // Output: 15

Khi nào nên sử dụng Closure ?

Các trường hợp chúng ta thường sử dụng Closure bao gồm

Data Encapsulation (Tính đóng gói): cho phép bạn đóng gói và bảo vệ các biến khỏi bị truy cập trên toàn cầu. Điều này giúp tạo ra các biến và hàm riêng tư.
Function Factories: Các Closure thường được sử dụng để tạo function factories (tạm gọi là nhà máy hàm), trong đó một hàm được trả về với hành vi cụ thể dựa trên các biến được thu thập.
Callback Functions: Các Closure thường được sử dụng trong các hàm callback mà bạn muốn duy trì một số trạng thái hoặc bối cảnh trong hàm callback
Event Handlers: Closure có thể được sử dụng trong trình xử lý sự kiện để duy trì thông tin trên nhiều sự kiện
Iterators and Generators: Closure có thể hữu ích trong việc tạo các trình vòng lặp và trình tạo bằng cách duy trì trạng thái giữa các lệnh gọi liên tiếp.

Những ví dụ (code mẫu) trường hợp điển hình của Closure

1. Data encapsulation

function createCounter() {
   let count = 0;
   return {
   increment: function() {
   count++;
   },
   getCount: function() {
   return count;
 }
};
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1

2. Function Factories

function multiplyBy(factor) {
return function (number) {
return number * factor;
};
}
const multiplyByTwo = multiplyBy(2);
console.log(multiplyByTwo(5)); // Output: 10

3. Callback functions:

function fetchData(url, callback) {
// Simulate an asynchronous API call
setTimeout(function() {
const data = { result: 'Some data' };
callback(data);
}, 1000);
}

fetchData('https://example.com/api', function(result) {
console.log(result.result); // Output: Some data
});

4. Event Handlers

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

5. Iterators and Generators:

function createCounterGenerator(limit) {
  let count = 0;
    return {
      next: function() {
      if (count < limit) {
      return { value: count++, done: false };
      } else {
      return { done: true };
      }
    }
  };
}
const counterIterator = createCounterGenerator(5);
console.log(counterIterator.next()); // Output: { value: 0, done: false }
console.log(counterIterator.next()); // Output: { value: 1, done: false }
console.log(counterIterator.next()); // Output: { value: 2, done: false }
// ... and so on
const buttonClickHandler = createButtonHandler();
document.getElementById('myButton').addEventListener('click', buttonClickHandler);

Những khái niệm liên quan

Ngoài ra mình có viết thêm về các chủ đề Javascript tại link ở đây. Các bạn hãy ghé theo dõi để biết thêm nhiều nhé!

https://chatgpt.com/share/6764d397-95a0-8013-8484-db48c677a45c