function array and strange behaviour

Question

I have the following code:

var arr = [{Name: "foo", action: function(){ alert("foo")}},
       {Name: "bar", action: function(){ alert("bar")}}
      ]

var arr2 = {};

for(var i =0; i< arr.length; i++)
{
    var bla = arr[i];
    arr2[bla.Name] = function(){ bla.action() };
}          

arr2.foo();
arr2.bar();

that alerts two times "bar". when instead I do

    arr2[bla.Name] = bla.action;

that works.

any way to make it works in the first case (I need to append other things in my function)

Thanks !

@AlvinWong: He *should* be using an object here. He has string keys. — mpen, Feb 01 '13 at 07:42
Closure. Check this: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Marko Dumic, Feb 01 '13 at 07:47
@Mark - Yes, so it should have a name that doesn't imply it's an array... — nnnnnn, Feb 01 '13 at 07:57
@nnnnnn: Alvin originally said he should use `[]`. If you want to talk about naming, he should be choosing more descriptive names altogether, not solely based on type. — mpen, Feb 01 '13 at 16:26

score 3 · Accepted Answer · answered Feb 01 '13 at 07:45

3

It's because your bla inside your anonymous function is a reference and it keeps being updated inside the loop to point to the next object. When the loop terminates they will all point to the last element you referenced inside your loop.

You can fix it by doing something like

arr2[bla.Name] = (function(x) { return function(){ x.action(); }})(bla);

fiddle

answered Feb 01 '13 at 07:45

mpen

272,448
266
850
1,236

great, forgot that one ! Thanks – rbag Feb 01 '13 at 14:11

score 2 · Answer 2 · answered Feb 01 '13 at 07:44

The value of bla is changing and the function you create will always use the value as it is when it is called.

You might create a closure to protect the bla variable :

for(var i =0; i< arr.length; i++) {
    (function(bla){
        arr2[bla.Name] = function(){ bla.action() };
    })(arr[i]);
}

If your action functions don't need any context or arguments, you might also simplify the loop in

for(var i =0; i< arr.length; i++) {
    var bla = arr[i];
    arr2[bla.Name] = bla.action;
}

function array and strange behaviour

2 Answers2