Lưu Trữ Biến và Tối Ưu Mã JavaScript với Closure

Bạn viết hàm trong JavaScript, muốn giữ giá trị biến giữa các lần gọi nhưng không dùng biến toàn cục? Hoặc cần đóng gói logic, tránh xung đột tên biến trong dự án lớn? Closure là giải pháp - nhưng nếu không hiểu rõ, bạn sẽ gặp lỗi về phạm vi biến hoặc rò rỉ bộ nhớ.

Bài này giải thích closure hoạt động như thế nào, cách JavaScript lưu trữ biến trong closure, và các tình huống thực tế để tối ưu mã. Hiểu rõ closure giúp bạn quản lý trạng thái hiệu quả và viết code dễ bảo trì hơn.

#1. Closure là gì?

Closure trong JavaScript là một cấu trúc cho phép một hàm “nhớ” môi trường (execution context) (bao gồm các biến, hằng số, hàm…) tại thời điểm nó được định nghĩa, ngay cả khi hàm đó được thực thi ngoài phạm vi ban đầu. Nói đơn giản hơn, closure cho phép một hàm truy cập các biến được khai báo bên ngoài khối lệnh của nó.

#1.1. Ví dụ đơn giản về closure

Hãy xem đoạn mã sau:

1
2
3
4
5
6
7
8
9
10
11
12
function createCounter() {
  let count = 0;
  function increment() {
    count++;
    console.log('Current count:', count);
  }
  return increment;
}

const myCounter = createCounter();
myCounter(); // Current count: 1
myCounter(); // Current count: 2

Giải thích:

  • createCounter() định nghĩa biến count bên trong, sau đó trả về hàm increment().
  • myCounter là hàm increment() được lưu trữ và khi gọi myCounter(), biến count vẫn còn ở đó, dù createCounter() đã kết thúc. Đây chính là closure: hàm trả về (myCounter) vẫn “nhớ” giá trị count.

Trong thực tế: Pattern này rất phổ biến khi bạn cần tạo nhiều counter độc lập (ví dụ: đếm số lần click vào các button khác nhau) mà không muốn dùng biến toàn cục hoặc class phức tạp.

#2. Closure lưu trữ trong vùng nhớ của hàm trả về

Một điểm quan trọng: closure không đơn giản chỉ là khái niệm trừu tượng. Về mặt kỹ thuật, khi bạn trả về một hàm bên trong một hàm khác, JavaScript sẽ tạo ra một “tham chiếu” tới vùng nhớ có chứa các biến. Vùng nhớ này được gắn kèm cùng hàm trả về, cho phép hàm đó truy cập “môi trường” (environment) ban đầu.

#2.1. Sử dụng console.dir() để xem chi tiết closure

Một mẹo hữu ích là sử dụng console.dir() trong trình duyệt (Chrome, Firefox) để xem cấu trúc chi tiết của hàm, bao gồm cả closure.

Ví dụ:

1
2
3
4
5
6
7
8
9
function createGreeter(name) {
  return function() {
    console.log('Hello, ' + name + '!');
  };
}

const greetJohn = createGreeter('John');
console.dir(greetJohn); // Quan sát ở console để thấy closure
greetJohn(); // Hello, John!

Giải thích:

  • Khi bạn dùng console.dir(greetJohn), trong tab “Console” của trình duyệt, bạn sẽ thấy một đối tượng hàm có chứa nhiều trường. Trong đó, phần [[Scopes]] (hoặc phần tương tự tùy thuộc vào trình duyệt) sẽ cho thấy closure của hàm greetJohn. Tại đây, bạn có thể thấy biến name được lưu trữ.

Trong thực tế: Kỹ thuật debug này cực kỳ hữu ích khi bạn gặp bug về closure và không hiểu tại sao hàm “nhớ” giá trị nào. Thay vì đoán mò, dùng console.dir() để xem chính xác closure chứa biến gì.

#3. Lỗi thường gặp và cách tối ưu trong thực tế

#3.1. Phạm vi biến và lỗi vô tình “rò rỉ” giá trị

Trong các dự án thực tế, việc sử dụng closure mà không kiểm soát có thể gây ra lỗi. Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function createUsersGreet(users) {
  let index = 0;
  return function() {
    if (index < users.length) {
      console.log('Hi ' + users[index]);
      index++;
    } else {
      console.log('No more users!');
    }
  };
}

const users = ['Alice', 'Bob', 'Charlie'];
const greetUsers = createUsersGreet(users);

// Vòng lặp gọi greetUsers nhiều lần
for (let i = 0; i < 5; i++) {
  greetUsers();
}
// Kết quả:
// Hi Alice
// Hi Bob
// Hi Charlie
// No more users!
// No more users!

Vấn đề: Nếu bạn quên reset index hoặc logic kiểm tra không chặt chẽ, closure sẽ vẫn “nhớ” giá trị index, dẫn tới kết quả không mong muốn (in “No more users!” nhiều lần).

Cách khắc phục: Quản lý biến trong closure cẩn thận, hoặc nếu cần, tạo hàm reset hoặc tái tạo closure khi phù hợp.

Trong thực tế: Bug này thường xuất hiện khi bạn dùng closure cho quiz app (câu hỏi tiếp theo), carousel (slide tiếp theo), hoặc pagination (trang tiếp theo). Luôn kiểm tra điều kiện biên và thêm hàm reset khi cần.

#3.2. Phòng tránh vòng lặp vô hạn

Lỗi vòng lặp vô hạn thường xảy ra khi bạn quên điều kiện dừng trong closure. Ví dụ, nếu bạn có một closure đọc dữ liệu từ server và tăng dần chỉ số trang, nhưng không bao giờ dừng, sẽ tạo ra vòng lặp liên tục.

Cách phòng tránh:

  • Kiểm tra điều kiện dừng trước mỗi lần gọi.
  • Thiết kế logic kiểm soát biến trong closure rõ ràng, đặt giới hạn, hoặc sử dụng cờ boolean để kết thúc.

Trong thực tế: Lỗi vòng lặp vô hạn với closure thường gặp trong auto-refresh data, polling API, hoặc recursive functions. Luôn thêm điều kiện dừng hoặc max retry limit để tránh crash browser.

#4. Tối ưu mã trong dự án lớn

#4.1. Sử dụng closure để đóng gói logic

Trong dự án thực tế, bạn có thể dùng closure để tạo module nhỏ, đóng gói logic, tránh nhiễu biến toàn cục. Điều này làm mã dễ hiểu và bảo trì hơn.

Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const userModule = (function() {
  let users = [];
  function addUser(name) {
    users.push(name);
  }
  function listUsers() {
    console.log(users);
  }
  return {
    addUser,
    listUsers
  };
})();

userModule.addUser('Daisy');
userModule.listUsers(); // ['Daisy']

Ý nghĩa thực tế:

  • Bạn tạo ra một module với các hàm addUser, listUsers truy cập chung vào biến users thông qua closure.
  • Biến users được “đóng kín” (encapsulated), giúp tránh xung đột biến với phần mã khác.

#4.2. Quản lý phân trang và data fetching

Closure rất hữu ích khi bạn cần quản lý trạng thái phân trang hoặc lấy dữ liệu từ server:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createDataFetcher(apiUrl) {
  let page = 1;
  return async function() {
    const response = await fetch(apiUrl + '?page=' + page);
    const data = await response.json();
    if (data.length === 0) {
      console.log('No more data!');
      return;
    }
    console.log('Data page ' + page + ':', data);
    page++;
  };
}

const fetchData = createDataFetcher('https://api.example.com/data');
fetchData(); // Lần 1
fetchData(); // Lần 2
// ... cho đến khi hết dữ liệu

Cách tối ưu:

  • Hàm createDataFetcher nhớ biến page trong closure, giúp bạn dễ dàng điều khiển logic phân trang mà không cần biến toàn cục.
  • Thêm điều kiện dừng (nếu data.length === 0) để tránh vòng lặp vô hạn.

Trong thực tế: Pattern này rất hữu ích cho infinite scroll, load more button, hoặc lazy loading images. Mỗi lần gọi fetchData() tự động tăng trang - code ngắn gọn và dễ quản lý hơn so với quản lý state toàn cục.

Vậy là bạn đã hiểu cách closure hoạt động: hàm “nhớ” biến từ outer scope, JavaScript lưu trữ chúng trong vùng nhớ riêng, và bạn có thể dùng console.dir() để debug. Closure giúp đóng gói logic (module pattern), quản lý trạng thái (counter, pagination), và tránh xung đột biến toàn cục - nhưng cần cẩn thận với điều kiện dừng để tránh memory leak hoặc vòng lặp vô hạn. Lần tới khi cần giữ giá trị giữa các lần gọi hàm, thử áp dụng closure thay vì biến global!



Tags

Related posts