Mutable variable is accessible from closure

Question

I have the following code:

for (var i = 0; i < data.length; i++) {
        var file = data[i];
        $.getJSON("/types/" + file, function(json) {
            if (json[0] !== undefined) {
                console.log(json[0] + file);
            }
        });
    }

But my editor is saying "Mutable variable is accessible from closure". I've tried to change function(json) { to function(json, file) {, but this don't work because this is a default function of jquery.

I hope you can help my fixing the problem.

You've answered Mutable variable is accessible from closure. So, did you try using closure??? — Bhojendra Rauniyar, Sep 03 '14 at 07:50

score 19 · Accepted Answer · answered Sep 03 '14 at 07:46

19

For such loops, you need to put the contents in a closure.

for (var i = 0; i < data.length; i++) {
    (function(){
        var file = data[i];
        $.getJSON("/types/" + file, function(json) {
            if (json[0] !== undefined) {
                console.log(json[0] + file);
            }
        });
    })();
}

answered Sep 03 '14 at 07:46

Van Coding

24,244
24
88
132

You're welcome. If you need further explanation, just tell me ;) – Van Coding Sep 03 '14 at 07:51
Oh, du sprichst sogar Deutsch :) – jan Sep 03 '14 at 07:53
1

@VanCoding: Can you explain your answer? From what I think, this would stop the value of 'i' from getting changed by other functions. is it ? – Shashank Vivek Apr 14 '17 at 10:41

score 9 · Answer 2 · answered Sep 03 '14 at 08:00

You can use a closure as suggested, also it doesn't make your code easier to read, especially if your closure is inside a loop! Much easier and cleaner to simply create a function and call it on each iteration.

for (var i = 0; i < data.length; i++) {
    doJson(data[i]);
}

function doJson(file) {
    $.getJSON("/types/" + file, function(json) {
        if (json[0] !== undefined) {
            console.log(json[0] + file);
        }
    });
}

Or you could simply update your loop to use forEach instead, because a new function get fired on each iteration the scope will be limited to it.

data.forEach(function(file) {

    $.getJSON("/types/" + file, function(json) {
        if (json[0] !== undefined) {
            console.log(json[0] + file);
        }
    });
});

These options are much more clear and readable than the accepted answer — McGiogen, Sep 23 '16 at 10:56

score 3 · Answer 3 · answered Dec 10 '15 at 07:00

If you can use ES6, you could simply replace var with let and everything works as expected because let creates a new scope in every iteration of the for loop.

for (let i = 0; i < data.length; i++) {
        var file = data[i];
        $.getJSON("/types/" + file, function(json) {
            if (json[0] !== undefined) {
                console.log(json[0] + file);
            }
        });
    }

score 2 · Answer 4 · answered Sep 03 '14 at 07:45

You should use closure : ( be careful when running functions in a loop).

for (var i = 0; i < data.length; i++)
{
    var file = data[i];

    (function(f)
    {

        $.getJSON("/types/" + f, function(json)
        {
            if (json[0] !== undefined)
            {
                console.log(json[0] + f);
            }
        })
    })(file);


}

Mutable variable is accessible from closure

4 Answers4