Asynchronous Javascript Variable Overwrite

Question

The code has an issue that the variable gets over written when the asynchronous function is called. How can it be fixed?

Code:

for (x in files) {

 asynchronousFunction(var1, var2, function(){
      console.log(x.someVaraible);
  }); 

}

Now the issue is that when the callback function in the asynchronousFunction is called the x.files variable has been updated to the next varaible in the json array files. I want that the variable should contain the previous value.

The number of variables in the callback function can not be changes, so variable name can not be sent in the call back function.

This code is probably broken. x will always be a string, not an array element (which appears to be what you're going for). — cHao
– cHao, Commented Jul 31, 2012 at 19:06
There's no such thing as a JSON object. JSON is a text format. You have JSON, and you have objects. And yes, x will always be a string, and almost certainly not the one you were expecting, because for...in loops over property names, not values. (Side note: people shouldn't be using for...in in most of the cases where they do. This being a prime example.) — cHao
– cHao, Commented Jul 31, 2012 at 19:08

manneJan89 · Accepted Answer · 2022-01-21 09:00:22Z

14

The problem with using 'local' variables in javascript is that your variables actually have function scope, rather than block scope - like Java and C# etc has.

One way to get around this is using let which has block scope, but only firefox supports this currently.

So this code would work in firefox only:

for (var x in files) {
  // This variable has BLOCK scope
  let file = files[x];
  asynchronousFunction(var1, var2, function(){
     console.log(file.someVariable);
  }); 
}

For other browsers, the alternative is to use closures

for (var x in files) {
  var file = files[x];
  asynchronousFunction(var1, var2, (function(file){
      return function() {
                console.log(file.someVariable);
             };
  })(file); 
}

Another way you could do this is using map/forEach, assuming that the datatype of files is an array.

files.forEach(function(file) {
     asynchronousFunction(var1, var2, function(){
                console.log(file.someVariable);
             });
});

If it's not an array, then you can always use this technique

 [].forEach.call(files, function(file) {
     asynchronousFunction(var1, var2, function(){
                console.log(file.someVariable);
             });
});

The fuller way of writing this is of course

Array.prototype.forEach.call(files, function(file) {
     // As before

But I feel [].forEach is nicer on the eyes.

edited Jan 21, 2022 at 9:00

manneJan89

1,0149 silver badges28 bronze badges

answered Jul 31, 2012 at 19:13

AlanFoster

8,3245 gold badges38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Esailija Over a year ago

lol, +1 for using the actual object value haha. I don't even care about other mistakes at this point.

slebetman Over a year ago

Answer is correct but explanation is wrong. The problem is not that varaibles have function scope but rather that a closure is created when a variable is shared between two functions. What you want to do is to break the closure. Fortunately javascript passes arguments by copy of reference. Since it copies the reference instead of passing the reference itself the closure is broken. That's why the method of using function arguments work.

cHao Over a year ago

"Passes by copy of reference"? Kinda a conflation of things. JS passes by value. As in, by copy. Always. Just so happens that the "value" of an object variable is a reference to an object.

Esailija Over a year ago

Now that we are actually using values and the scoping is handled, can we use for loop since it's an array?

AlanFoster Over a year ago

@Esailija I'm not sure I understand your question. Do you mean a forEach loop? files.forEach(...) ?

|

Community · Accepted Answer · 2017-05-23 12:34:30Z

2

You need to disentangle the x from the closure created by the callback function. Short answer:

for (x in files) {
    asynchronousFunction(var1, var2,
        (function(y){
            return function(){
                console.log(y.someVaraible);
            }
        })(x)
    ); 
}

For a longer answer and explanation see my answer to a previous question: Please explain the use of JavaScript closures in loops

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jul 31, 2012 at 19:11

slebetman

115k19 gold badges147 silver badges180 bronze badges

Comments

Robert · Accepted Answer · 2012-07-31 19:07:12Z

0

You need to either bind the variable to the function definition, or pass the variable into the function. I'd probably take a combination approach, something like:

for (x in files) {
    var local_x = x;
    var fn = function () {
         theRealFunction( local_x );
    };
    asynchronousFunction(var1, var2, fn);
}

Although in your example I wouldn't need to call theRealFunction() as its such a small amount of code (just console.log).

answered Jul 31, 2012 at 19:07

Robert

2,44621 silver badges12 bronze badges

3 Comments

AlanFoster Over a year ago

This won't work. Variables have function scope, not block scope.

S. A. Malik Over a year ago

There is an issue the no of variables in the function could not be increased. So there should be some other way out.

slebetman Over a year ago

@Robert: This is wrong. You need to pass x to fn as a parameter. That's the only mechanism in javascript for breaking closures.

Esailija · Accepted Answer · 2012-07-31 19:10:28Z

0

X gets iterated so by the time the callback function is called, x will be the last iterated function from the loop.

Fix by making x local like this:

for (x in files) {
    (function() {
        var x = arguments[0];
        asynchronousFunction(var1, var2, function() {
            console.log(x.someVaraible);
        });
    }(x));
}

edited Jul 31, 2012 at 19:10

Esailija

140k24 gold badges280 silver badges328 bronze badges

answered Jul 31, 2012 at 19:08

Silviu-Marian

10.9k7 gold badges55 silver badges76 bronze badges

8 Comments

AlanFoster Over a year ago

This won't work. Variables have function scope, not block scope.

Esailija Over a year ago

There's plenty of functions in there. He is still using x though which is just a string key.

S. A. Malik Over a year ago

Will it not effect the other callbacks in the iteration?

S. A. Malik Over a year ago

@AlanFoster: Any way to fix it, in your opinion?

slebetman Over a year ago

@Esailija: Your code is buggy. It should be (function(x){.... Of course, to avoid confusion you really should use another letter.

|

Collectives™ on Stack Overflow

Asynchronous Javascript Variable Overwrite

4 Answers 4

8 Comments

Comments

3 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related