Variable Set To Last Value In For Loop In Javascript

I have a question about the output of the following code. var _list = [{id:0}, {id:1}, {id:2}, {id:3}, {id:4}]; function storeList() { for (var i = 0, j = _list.length; i <

Solution 1:

You need to make a closure. You can do this by wrapping the code after key creation in a self executing function (IIFE)

(function(key) {
    db.setValue(
        function() {
            console.log("OK: store a value of " + key);
        },
        function() {
            throw"ERR: can't store a value of " + key;
        },
        databaseName,
        key,
        _list[i]
    );
})(key);

This is because the scope of key before was visible to all your iterated setValue calls. By using an IIFE, your passed keys scope is 'within' each setValue call.

Solution 2:

db.setValue is an async method. So when you call it, it detaches itself from main program flow while maintaining its access to loop counter i. Javascript always completes the current flow before executing any async code. So your loop runs 4 times, each time creating a block of async code that can only run after the currently executing program (for loop) is completed.

Note that each async block has the access to same i. Therefore, when it's time for them to execute, all they see is the value of i which exists after the main flow was completed (which in this case is 4).

With that in mind, the easiest way to deal with these problems is to create a closure. Basically, you'll give each async block a copy of i which will remain at the value it was when the block was created (unless your async block changes it). You can do that by iife as @AmmarCSE described. A cleaner way to approach is to move this stuff out in a method.

functionsetValue (i) {
    var key = makeKey(_list[i].id);
    _db.setValue(
        function() {
            console.log("OK: store a value of " + key);
        },
        function() {
            throw"ERR: can't store a value of " + key;
        },
        databaseName,
        key,
        _list[i]
    );
};

functionstoreList() {
    for (var i = 0, j = _list.length; i < j; i++) {
        setValue(i);
    }
}