javascript anonymous function scope behavior

Question

I have a code that kind of follows this pattern:

a = "abcdefghijklmnopqrstuvwxyz";
m = {};

for(i=0;i<10;i++){
  m[a.charAt(i)] = function(){
      return i;
  };
}

console.log(m.c());

it returns 10.

WHY the heck does it do that? And how could I get it to return the corresponding number?

------- EDIT -------

Thank for your great responses. The answers that have been provided so far work for the above example, but I forgot to mention that I need to pass a callback function. Taking your advice into consideration I came up with this:

a = "abcdefghijklmnopqrstuvwxyz";
m = {};

f = function(i) {
    return function(){
        return i;
    }
}

for(i=0;i<10;i++){
    var eval('n') = "hi";
    console.log(n);
    m[a.charAt(i)] = function(fn){
        fn(f(i));
    };
}

m.c(function(a){console.log(a);});

and the outcome agreed with my intuition that it would not work. Does anyone have any ideas for this?

Thanks for your help

As a result of your help here I was able to start this project: https://github.com/sbussard/python-for-node

Please feel free to continue to contribute as you wish.

yankee · Accepted Answer · 2011-02-06 17:09:30Z

4

Cage variables in a loop without changing them.

Non desired behaviour

> myFunctions = new Array() 
[object Array]

for(var i = 0; i < 3; ++i) myFunctions[i] = function() { return i; } 

> myFunctions[0]() 
3

> myFunctions[1]() 
3

> myFunctions[2]() 
3

Fixed

>myFunctions = new Array() 
[object Array]

function mkFunctionWithCagedValue(value) { 
    return function() { 
        return value;
    };
} 

> for(var i = 0; i < 3; ++i) myFunctions[i] = mkFunctionWithCagedValue(i) 
[object Function]

> myFunctions[0]() 
0

> myFunctions[1]() 
1

> myFunctions[2]() 
2

edited Feb 6, 2011 at 17:09

answered Feb 6, 2011 at 4:35

yankee

41.3k17 gold badges113 silver badges169 bronze badges

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

5 Comments

Stephen Over a year ago

This seems to work, but what I forgot to include was that I also need to pass a callback to the function. Sort of like this: myFunction[0](function(n){alert(n);});

yankee Over a year ago

@Stephen: Well... No Problem. Just use function mkFunctionWithCagedValue(value) { return function(f) { f();};} instead of the slightly different line in my example. Or is there more to it?

Stephen Over a year ago

Maybe I don't quite understand what you mean, because my tests lead me to that sort of thing doesn't work. Here's what I've got currently: a = "abcdefghijklmnopqrstuvwxyz"; m = {}; function r(fn,v) { return function() { return fn(v);};} for(i=0;i<10;++i) m[a.charAt(i)] = r(fn,i); m.c(function(a){console.log(a);}); and I get the error that fn is not defined.

Stephen Over a year ago

the same error occurs as well with this statement change: for(i=0;i<10;++i) m[a.charAt(i)] = function(fn){r(fn,i)};

Stephen Over a year ago

I can truly say I have learned two incredible things about javascript and programming in general. It works! I think it's just incredible that the code you just provided actually works and it implicitly passes the callback function to r. I'm officially impressed!

sth · Accepted Answer · 2011-02-06 04:44:02Z

3

The function references the variable i. At when the function is executed (at the console.log() line), it prints the variable, which has a value of 10 at that time.

To work around this problem you need to create a new variable in each iteration that gets assigned the current value of i. To get a new variable scope in each iteration you can use an additional function:

for(i=0;i<10;i++){
  function use_copy() {
    var icopy = i; # a new variable to hold the value of i
    return (function(){
      # original function, now using icopy
      return icopy;
    });
  }
  m[a.charAt(i)] = use_copy();
}

answered Feb 6, 2011 at 4:44

sth

231k56 gold badges288 silver badges370 bronze badges

2 Comments

Yanick Rochon Over a year ago

creating the function each time inside the loop is unnecessary. Declare the function outside which takes one argument (i) and set m[a.charAt(i)] = use_copy(i); instead

Stephen Over a year ago

Great! Is there any ways I could also pass a callback function?

Yanick Rochon · Accepted Answer · 2011-02-06 05:05:00Z

0

** EDITED **

Your variable i inside your loop equals 10 at the time you call m.c() and since it is used in your function, it returns 10 for each "index". Just save a copy of this variable. For example :

someFunction = function() {
   alert(i);  // will alert 10 because using i from the loop!
};
a = "abcdefghijklmnopqrstuvwxyz";
m = {};

for(i=0;i<10;i++){
  m[a.charAt(i)] = (function(i, callback) {
     // i is a local copy!
     return function() {
        callback();   // invoke callback function
        return i;
     };
  })(i, someFunction);
}

console.log(m.c());  // would return 2

edited Feb 6, 2011 at 5:05

answered Feb 6, 2011 at 4:57

Yanick Rochon

53.8k30 gold badges146 silver badges231 bronze badges

Collectives™ on Stack Overflow

javascript anonymous function scope behavior

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related