ansaurus

Question

Why aren't these two bits of JavaScript equivalent?

Answer 1

+10 A:

You would be having a very common closure problem in the for in loop.

Variables enclosed in a closure share the same single environment, so by the time the mouseenter callback is called, the loop will have run its course and the id variable will be left pointing to the value of the last element of the names array.

This can be quite a tricky topic, if you are not familiar with how closures work. You may want to check out the following article for a brief introduction:

Mozilla Dev Center: Working with Closures

You could solve this with even more closures, using a function factory:

function makeMouseEnterCallback (id) {  
  return function() {  
    console.log(id);
  };  
}

// ...

var id, k,
    names = ['one','two','three'];

for (k = 0; k < names.length; k++) {
  id = names[k];
  $("#" + id).mouseenter(makeMouseEnterCallback(id));
}

You could also inline the above function factory as follows:

var id, k, 
    names = ['one','two','three'];

for (k = 0; k < names.length; k++) {
  id = names[k];
  $("#" + id).mouseenter((function (p_id) {  
    return function() {  
      console.log(p_id);
    };  
  })(id));
}

Any yet another solution could be as @d.m suggested in another answer, enclosing each iteration in its own scope:

var k, 
    names = ['one','two','three'];

for (k = 0; k < names.length; k++) {
  (function() {
    var id = names[k];
    $("#" + id).mouseenter(function () { console.log(id) });
  })();
}

Although not related to this problem, it is generally recommended to avoid using a for in loop to iterate over the items of an array, as @CMS pointed out in a comment below (Further reading). In addition, explicitly terminating your statements with a semicolon is also considered a good practice in JavaScript.

Daniel Vassallo 2010-07-20 06:25:45

Good answer (+1) but would be even better if you showed him how to do it in a loop by new-ing up new strings for the IDs.

Bernhard Hofmann 2010-07-20 06:32:05

Also, although is not the problem, I'll not ever get tired of recommending to **avoid** the `for-in` statement for "iterate" over array objects. [More info](http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript/3010848#3010848)

CMS 2010-07-20 06:32:17

@Bernhard: Thanks... I'll update my answer with a couple of solutions :)

Daniel Vassallo 2010-07-20 06:33:27

@Daniel: Small typos, the function name on the first example, and immediate invocation of the anonymous function of the second are missing.

CMS 2010-07-20 07:02:25

@CMS: Oops. Thanks. Fixed :)

Daniel Vassallo 2010-07-20 07:07:48

Answer 2

+2 A:

This happens because when the code of the anonymous function function(){console.log(id)} is executed, the value of id is three indeed.

To can use the following trick to enclose the value on each loop iteration into the anonymous callback scope:

names=['one', 'two', 'three'];
for (var k in names) {
    (function() {
        var id = names[k];
        $("#"+id).mouseenter(function(){ console.log(id) });
    })();
}

d.m 2010-07-20 06:32:03

It will not work, because `id` is undeclared and it will become a property of the global object (`window.id`). You need to bind it to the new variable environment (use `var`!).

CMS 2010-07-20 06:37:52

Thank you, CMS, silly me copy-pasted it without checking.

d.m 2010-07-20 06:41:12

@d.m.: You're welcome. Be aware also that `k` will become global, and that the purpose of the `for-in` statement isn't really to *iterate* over the indexes of array objects, it's purpose is to *enumerate* object properties.

CMS 2010-07-20 06:43:19

@CMS, oh, dang, sorry; just awaken, not in this world yet.I know about for-in; personally I'd prefer the `for (var i = names.length - 1; i >= 0; i--)`loop in this case, but as I said already, I just copied the fastmultiplication's code.

d.m 2010-07-20 06:51:53

@d.m.: No problem! Yeah, any *secuential loop*, and if the order of iteration is not important a reverse loop e.g. `var i = names.length; while (i--) {/**/}` is enough. Cheers!

CMS 2010-07-20 06:56:01

ansaurus

tags:

views:

answers:

Why aren't these two bits of JavaScript equivalent?

related questions