使用循环将闭包函数存储在数组中

Question

This is the code :

i'm storing the function body inside each element of " resultArr " , the problem is when i call the stored function _class[0]() i can't reach the exact i it's always 4 !

var checkAttendanceFunc = function(nameArr) {
  var resultArr = [];

  for(var i = 0; i < nameArr.length; i++) {
    resultArr.push(function(){console.log('Is', nameArr[i], 'present?', i);});
  }
  return resultArrultArr;
};

var _class = checkAttendanceFunc(["alex", "brownex", "chris", "mack"]);

i think it's obvious if i call any item of _class ie _class[0]() the index will be 4 and the name will be "undefined"

So how wan i solve this problem, i saw some ppl use the apply native function, but i think it works only if we store the function name not the body of a given function

Answer 1

Still not sure I understand the intent of this code, but here's a working version that does what I think you're trying to do:

var students = ["alex", "brownex", "chris", "mack"];
var _class = students.map(function(name, i) {
    return function() {
        console.log('Is', name, 'present?', i);
    };
});

See it in action here .

---

If you're really just looking for how to make it work with a for-loop , you could always capture it like this:

var checkAttendanceFunc = function(nameArr) {
    var resultArr = [];

    for(var i = 0; i < nameArr.length; i++) {
        resultArr.push((function(idx) {
            return function() {
                console.log('Is', nameArr[idx], 'present?', idx);
            };
        })(i));
    }

    return resultArr;
};

var _class = checkAttendanceFunc(["alex", "brownex", "chris", "mack"]);

Similarly, you can also use .bind() :

var checkAttendanceFunc = function(nameArr) {
    var resultArr = [];

    for(var i = 0; i < nameArr.length; i++) {
        resultArr.push((function(idx) {
            console.log('Is', nameArr[idx], 'present?', idx);
        }).bind(null, i));
    }

    return resultArr;
};

var _class = checkAttendanceFunc(["alex", "brownex", "chris", "mack"]);

Either way, I personally find the .map() solution much more elegant and readable.

Answer 2

In this case, all the closures inside checkAttendanceFunc point to a reference of the i and nameArr variable.

When the loop is done, i 's value is 4 for all the functions you generated , what you need is copying i each time you pass it to a closure.

There are several ways for you to achieve this:

Immediately call the function

var checkAttendanceFunc = function(nameArr) {
  var resultArr = [];

  for(var i = 0; i < nameArr.length; i++) {
    resultArr.push(function(index){
        return function(){
            console.log('Is', nameArr[index], 'present?', index);
        }
    }(i));
  }
  return resultArr;
};

Here you're passing an argument fo the closure and you call it immediately. In this case, i is getting copied and the function has its own value named index .

Use another function that iterates on the array

In this case I'm using Array.forEach

var checkAttendanceFunc = function(nameArr) {
  var resultArr = [];

  nameArr.forEach(function (value, index){
     resultArr.push(function() {
        console.log('Is', value, 'present?', index); 
     }); 
  });
  return resultArr;
};

In this case the functions created recieve a copy of value and index , which means they will always point to the same values .