Adding functions to javascript's array in a loop

Question

I'm try to creat array with functions in a loop. But I think don't get something about encapsulation.

For example this code returns "y y". Live demo.

HTML

<div id="result"></div>

Javascript

var json = {
            '1':'x',
            '2':'y'
           };
var my_array = [];
var div = document.getElementById('result');

for (var key in json) {
    my_array.push(function() { 
        div.innerHTML = div.innerHTML + ' ' + json[key];
    });
};

var length = my_array.length;

for (var i = 0; i < length; i++) {
  my_function = my_array[i];
  my_function();
}

What should I do to get "x y"?

Tnx a lot.

it does not work, because at the time u you calling the function the value of key variable is '2' — Kamen Stoykov
– Kamen Stoykov, Commented Jul 11, 2013 at 20:55
Just a bit of curiosity here. Why do you need to have an array of functions? Isn't it even simpler to have an array of keys or whatever values that need to be used? — Frederik.L
– Frederik.L, Commented Jul 11, 2013 at 21:08

Vivin Paliath · Accepted Answer · 2013-07-11 21:07:54Z

8

This is due to the way closures work in JavaScript.

You want something like this:

for (var key in json) {
    (function(key) {
        my_array.push(function() { 
            div.innerHTML = div.innerHTML + ' ' + json[key];
        });
    })(key);
}

In JavaScript, closures or anonymous functions are lexically bound to the scope in which they are defined. What this means is that they have access to all variables that have been defined in the scope in which the closure is also defined.

So in your original code, you have key, which initially points to 1. In your function, you have json[key], which originally is json[1], which is x. Then when the loop goes to the next iteration you have key set to 2. But the thing is that key in the first function instance and the second function instance both point to the same location. So when you finally evaluate the function, they will use whatever value key has at the time of execution. At the time of execution, key is set to 2 because that was the last value of key at the end of the loop.

To fix this, you have to introduce a new scope by using an anonymous, self-invoked function. By using this pattern, you deliberately introduce a new scope such that key in this new scope has its own location and is different from key in the outer scope.

Check out the updated fiddle.

edited Jul 11, 2013 at 21:07

answered Jul 11, 2013 at 20:53

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

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

5 Comments

taylorc93 Over a year ago

This doesn't work... Even if you can identify the problem, you might want to verify that your code works before submitting it as an answer

Vivin Paliath Over a year ago

@taylorc93 Minor typo; fixed.

Ian Over a year ago

You don't "have to introduce a new scope by using an anonymous, self-invoked function". You can do it in a cleaner way by calling a function that passes the necessary things and returns a new function/scope.

Vivin Paliath Over a year ago

@Ian That is another approach that would work as well. I guess it's a matter of personal preference, but I find it much more idiomatic to use an anonymous function in this manner rather than calling another function. You then have to jump to that function which can be a little jarring and cause some loss of context. Again, just a matter of personal preference.

Yevgen Over a year ago

@VivinPaliath thx a lot. Works fine. Special thanks for the comments

Collectives™ on Stack Overflow

Adding functions to javascript's array in a loop

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related