JS closure for mutable variables

Question

Please help me find the reason why the local "j" variable continues to change during the loop:

var a1 = a2 = a3 = {};

for (var i = 1; i < 4; i ++ ) {
  (function(j){
    console.log(j);
    window['a'+j].fu = function(){
      console.log('fu:',j);
    };
  })(i);

}

a1.fu(); // returns "fu:,3" - why not 1?

a2.fu(); // returns "fu:,3" - why not 2?

a3.fu(); // returns "fu:,3"

I read the nice answer on similar issue, but it's not working for my case. Mutable variable is accessible from closure. How can I fix this?

Well That's because you are passing "i" to the a(x).fu function which is "3" and inside the loop it is being treated as "j". If that is what you are refering to.. — Akshay Khandelwal, Sep 25 '15 at 15:58
The problem is not with the loop. `a1`, `a2`, `a3` all point to the very same object. In the last iteration of the loop you are setting the value of `fu` to a function that logs `3`. You want to create three objects: `var a1 = {}, a2 = {}, a3 = {};`. — Felix Kling, Sep 25 '15 at 16:00
@FelixKling Thanks Felix, didn't know that it works differently comparing to PHP. It's working now. — alex23, Sep 25 '15 at 16:13
Different languages usually work differently ;) I'd say PHP is the outlier here. Usually languages represent collections as references and do not copy on assign. — Felix Kling, Sep 25 '15 at 16:15

Tushar · Accepted Answer · 2015-09-25T16:11:06.587

Object assignment does not make copy of the objects, the same object is referenced by all the three variables. So, even changing the value inside the loop will update the same location for different object.

The value in the object is set as 3 in the last iteration of the loop and when retrieving the value after for loop, the value 3 is returned for all the variables.

When you create objects

var a1 = a2 = a3 = {};

all the three variables refer to the same object.

Solution to the problem can be declaring the object individually.

var a1 = {},
    a2 = {},
    a3 = {};

for (var i = 1; i < 4; i++) {
  (function(j) {
    console.log(j);
    window['a' + j].fu = function() {
      console.log('fu:', j);
    };
  })(i);
}

a1.fu(); // returns "fu:,3" - why not 1?

a2.fu(); // returns "fu:,3" - why not 2?

a3.fu(); // returns "fu:,3"

score 4 · Answer 2 · answered Sep 25 '15 at 16:03

The way you assigned a1, a2, and a3 all to the same object means they are all different names for the same thing, i.e. they all reference the same object.

Your for loop then runs three times, creating three anonymous functions. In each function, j has a different value, so you would expect running those functions to show three different values when you call fu().

However, since a1, a2, and a3 are all the same, each iteration of the loop overwites the previous fu(), until you're left only with the one with the embedded value of j being 3.

Run the code with different assignment, and watch how the behavior changes to what you were originally expecting:

var a1 = {};
var a2 = {};
var a3 = {};

hexa heart · Answer 3 · 2015-09-25T16:12:12.197

2

See every variable like a pointer to an object : var a = b = c = {}; is equal to :

a
 \
  \
b-- {}
  /
 /
c

You don't use the same variable to access the object but you modify the same object every time.

try:

a.test = 'fromA';
console.log(b.test); //fromA
console.log(c.test); //fromA

edited Sep 25 '15 at 16:12

answered Sep 25 '15 at 16:10

hexa heart

181
1
6

JS closure for mutable variables

3 Answers3