Giải mã 'Quân Đoàn Hàm Số': Khi Closure 'lừa' chúng ta trong JavaScript

Lê Lân

16/07/2025

Tìm Hiểu Về Closure Qua Bài Tập “Army of Functions” Trong JavaScript

Mở Đầu

Trong thế giới lập trình JavaScript, closure là một khái niệm quan trọng nhưng thường gây khó hiểu cho người mới học. Hiểu rõ closure không chỉ giúp bạn viết code hiệu quả hơn mà còn tránh được những lỗi “bí ẩn” khi làm việc với hàm và biến trong phạm vi (scope). Một trong những bài tập điển hình giúp bạn nắm chắc closure chính là bài “Army of Functions” được giới thiệu trên trang javascript.info .

Trong bài viết này, chúng ta sẽ cùng khám phá cách giải quyết bài tập thú vị này, tìm hiểu lý do tại sao một số hàm không hoạt động như mong đợi, và bật mí cách sử dụng vòng lặp phù hợp để khắc phục vấn đề closure. Đây là kiến thức cốt lõi để bạn nâng cao kỹ năng JavaScript của mình.

Phân Tích Bài Tập “Army of Functions”

Bối Cảnh Bài Toán

Bài tập yêu cầu tạo ra một mảng gồm nhiều hàm (shooter functions), mỗi hàm khi gọi sẽ in ra số thứ tự tương ứng (từ 0 đến 9). Tuy nhiên, nếu không xử lý kỹ lưỡng phạm vi biến, tất cả các hàm này cuối cùng sẽ cùng in ra một số là 10, gây khó hiểu và lỗi logic trong ứng dụng.

Lưu ý quan trọng: Đây chính là hậu quả phổ biến của closure và phạm vi biến trong JavaScript khi dùng var hoặc thậm chí khi xử lý biến ngoài vòng lặp.

Mô Hình Viết Hàm Ban Đầu

Đoạn code mẫu ban đầu có thể được xây dựng như sau:

function makeArmy() {
  let shooters = [];
  
  function generateShooter(number) {
    return function () {
      console.log(number);
    };
  }

  let i = 0;
  while (i < 10) {
    let shooter = generateShooter(i);
    shooters.push(shooter);
    i++;
  }

  return shooters;
}

let army = makeArmy();

army[0](); // ?
army[1](); // ?

Ở đây, generateShooter là một hàm tạo closure đóng gói tham số number . Vòng lặp while được dùng để tạo từng shooter function và đẩy vào mảng.

Kết Quả Và Vấn Đề Gặp Phải

Khi gọi army[0]() , ta mong đợi xuất ra số 0 , army[1]() ra 1 ,... Nhưng trong một số trường hợp, kết quả lại in ra 10 cho tất cả các shooters, tức là số cuối cùng của vòng lặp.

Nguyên nhân:

Nếu biến dùng trong vòng lặp là var , nó có phạm vi function nên tất cả closures cùng tham chiếu đến một biến chung.

Với let trong while , hành vi có thể khác nhau tùy phiên bản công cụ và browser.

Khi không sử dụng hàm tạo closure riêng biệt để giữ giá trị riêng của biến tại từng vòng lặp, các function sẽ ghi nhớ biến chung, dẫn đến lỗi.

Đây chính là minh họa điển hình của vấn đề đóng gói biến trong closure – khi các hàm chia sẻ cùng một tham chiếu biến ngoài thay vì giá trị riêng biệt.

Cách Khắc Phục Sử Dụng Vòng Lặp For

Tại Sao Nên Dùng Vòng Lặp `for` ?

Khác với while , vòng lặp for trong JavaScript với từ khóa let khai báo biến lặp giúp tạo ra một phạm vi mới cho mỗi vòng lặp. Điều này nghĩa là mỗi biến i trong vòng for được coi là một biến độc lập, riêng biệt trong từng vòng, nên closure sẽ lưu giữ giá trị đúng.

function makeArmy() {
  let shooters = [];

  for (let i = 0; i < 10; i++) {
    let shooter = function() {
      console.log(i);
    };
    shooters.push(shooter);
  }

  return shooters;
}

let army = makeArmy();

army[0](); // 0
army[1](); // 1
army[2](); // 2

Giải Thích Chi Tiết

Mỗi let i trong vòng for là một biến mới trong từng lượt lặp, đảm bảo closure giữ đúng giá trị.

Vì thế, mỗi function shooter khi gọi sẽ lấy chính giá trị i thu tại vòng lặp tương ứng.

Đổi vòng lặp từ while sang for với let là cách đơn giản, trực quan và hiệu quả để giải quyết vấn đề closure quấn tham chiếu biến lặp.

Một Số Giải Pháp Khác Cho Vấn Đề Closure

1. Dùng Hàm Tạo Closure Riêng Biệt

Tạo một hàm generateShooter(number) gói lại biến tham số riêng biệt:

function makeArmy() {
  let shooters = [];

  function generateShooter(number) {
    return function() {
      console.log(number);
    };
  }

  let i = 0;
  while (i < 10) {
    shooters.push(generateShooter(i));
    i++;
  }

  return shooters;
}

2. Sử Dụng IIFE (Immediately Invoked Function Expression)

function makeArmy() {
  let shooters = [];

  for (var i = 0; i < 10; i++) {
    (function(number) {
      shooters.push(function() {
        console.log(number);
      });
    })(i);
  }

  return shooters;
}

Phương pháp này tạo một phạm vi mới bằng cách chạy hàm ngay lập tức, giữ nguyên giá trị biến number .

So Sánh Các Phương Pháp

Cách làm	Ưu điểm	Nhược điểm
Vòng lặp `for` + `let`	Code ngắn gọn, dễ hiểu	Cần ES6 trở lên
Hàm tạo closure riêng	Dễ kiểm soát và mở rộng	Cần thêm hàm trung gian
IIFE	Tương thích ES5, vận hành tốt trên trình cũ	Code có thể phức tạp hơn

Kinh Nghiệm Sau Khi Giải Quyết Vấn Đề

Tác giả bài gốc có chia sẻ rằng bản thân đã áp dụng phương pháp hàm tạo closure riêng biệt trong vòng while , nhờ đó giữ được tham số chính xác cho từng function trong mảng.

“Javascript.info là một trong những website tốt nhất giúp bạn hiểu rõ các khái niệm JS với phương pháp học qua thực hành, đặc biệt đối với những phần như closure.”

Kết Luận

Closure luôn là chủ đề thử thách cho lập trình viên JavaScript, nhất là khi thao tác với biến trong vòng lặp. Bài tập “Army of Functions” là ví dụ rất hay để nhận diện và xử lý vấn đề này.

Chìa khóa để giải quyết là hiểu rõ phạm vi biến của let trong vòng lặp for hoặc tạo ra closure riêng biệt. Bạn nên luyện tập nhiều vấn đề tương tự để thành thạo.

Nếu bạn đang học JavaScript, đừng bỏ lỡ nguồn tài liệu quý giá tại javascript.info để hiểu sâu hơn và luyện tập kỹ năng.

Tham Khảo

JavaScript Closure – JavaScript.Info June 1, 2024

Axel Rauschmayer. Speaking JavaScript, 2014.

Mozilla Developer Network (MDN). Closures May 15, 2024