Javascript scoping error function that returns functions

Question

This is a simplified version of my function. The problem is that I get 2 both times in the alert. I believe this is a variable scope problem, but I can't seem to figure it out.

var someObj = {"a" : 1, "b" : 2};

function getData(obj){
  var bunchOfFunctions = {};  
    for(var key in obj){
      value = obj[key];
        bunchOfFunctions[key] = function(){
            alert(value);
        }
    }
  return bunchOfFunctions;
}

var functs = getData(someObj);
for(var key in functs){
    functs[key]();
}

Here is a jsfiddle http://jsfiddle.net/earlonrails/q4d66/

score 2 · Answer 1 · answered May 01 '13 at 23:16

It's kind-of a scope problem. The issue is that each function in the bunch shares the same variable "value". In your case, you forgot to declare "value" with var, so it's a global variable.

Even if you did use var, however, you'd have the same problem.

The trick is to introduce a new layer of scope by wrapping the creation of the function in yet another function.

    bunchOfFunctions[key] = function(valueCopy) {
      return function() {
        alert(valueCopy);
      };
    }(value);

score 2 · Accepted Answer · answered May 01 '13 at 23:18

Fiddle of below answer

You will have to replace

  value = obj[key];
  bunchOfFunctions[key] = function(){
      alert(value);
  }

With:

  value = obj[key];
  bunchOfFunctions[key] = (function(value) { return function() {
      alert(value);
  } })(value)

This is because the value variable keeps changing, so once the loop is done running value is 2. What this code does is call a function with value, and that function returns another function. The other function it returns, however, now has the correct value because it is in its own scope.

Thnx man good answer! Also liked Pointy's but you had a working fiddle which I enjoy! — earlonrails, May 01 '13 at 23:37

Rodrigo Villalba Zayas · Answer 3 · 2013-05-01T23:31:03.433

When the function containing the alert statement runs, it only see the value of the last interaction of the for statement

The solution to avoid this problem is:

var someObj = {"a" : 1, "b" : 2};

function getData(obj){
  var bunchOfFunctions = {};  
  for(var key in obj){
    var value = obj[key];
    bunchOfFunctions[key] = (function(x){
        return function() {
            alert(x);
        }
    })(value)
  }
  return bunchOfFunctions;
}

var functs = getData(someObj);
for(var key in functs){
   functs[key]();
}

Javascript scoping error function that returns functions

3 Answers3

Fiddle of below answer