Javascript closure?

Question

Method # 1

function transform(ar) {
    var alStr = [];
    for(var i=0; i<ar.length; i++) {

        alStr[i] = (function(v) {
            return (function() {
                return v;
            });
        }(ar[i]));
    }

    return alStr;
}

var a = ["a", 24, { foo: "bar" }];
var b = transform(a);
a[1];
b[1]();

Method # 2

function transform(ar) {
    var alStr = [];
    for(var a in ar) {
        var O = function() {
            return a;
        }
        alStr.push(O);
    }
    return alStr; 
}

var a = ["a", 24, { foo: "bar" }];
var b = transform(a);
a[1];
b[1]();

The above mentioned methods are used to convert an array objects into individual functions which on execution return the specific array object. Want to know why method #1 works and method #2 doesnt.

Only new functions introduce new variables .. this question has come up a good bit on SO. Search for "javascript loop last value" or similar. — user166390
– user166390, Commented Aug 6, 2012 at 1:12
In your non-working code, put the var a before the for loop, and it'll do a better job of reflecting reality. There are no variables that are local to the for statement, because in JavaScript, scope is always defined by a function. This means all the functions being created in the for loop are referring to the same a variable, which is local to the transform function. — user1106925
– user1106925, Commented Aug 6, 2012 at 1:21
see this article for a reference on variable scoping and hoisting in javascript. — J. Holmes
– J. Holmes, Commented Aug 6, 2012 at 1:32
@32bitkid : Both your links were very helpful, thanks a lot. — Zaje
– Zaje, Commented Aug 6, 2012 at 1:44

Peter Olson · Accepted Answer · 2012-08-06 01:39:29Z

4

In Method #2 there are two problems:

You are returning the key name, a, rather than the array value, ar[a]. That is, rather than return a; you want return ar[a];.
The function will always refer to the last value looped through because it references the same scope object. To create a new scope object you will need a closure, a with block, or a bound function.

With a closure:

for(var a in ar) { 
  var O = (function(val) { 
    return function() { 
      return val; 
     }
  })(ar[a]);
  alStr.push(O); 
}

With a with block:

for(var a in ar) { 
  with({val: ar[a]}) {
    alStr.push(function() { 
      return val; 
     });
  }
}

With a bound function:

for(var a in ar) { 
  var O = function(x) { return x; };
  alStr.push(O.bind(null, arr[a]));
}

edited Aug 6, 2012 at 1:39

answered Aug 6, 2012 at 1:13

Peter Olson

144k49 gold badges209 silver badges249 bronze badges

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

5 Comments

Zaje Over a year ago

Point #1 was a typo from my side, sorry. Still trying to understand the second point.

David Titarenco Over a year ago

Even though this answer is correct, function.bind ought to be preferred here imo.

Peter Olson Over a year ago

@DavidTitarenco Good point, I updated my answer and +1 to yours.

gilly3 Over a year ago

+1 for the with block trick. That is a statement that I think about occasionally, but rarely (never) use. I just may start using it a bit more.

RobG Over a year ago

The "with closure" example is actually without a closure. It's the closure in the OP's second example that is the issue, using an immediately invoked function expression breaks the closure.

David Titarenco · Accepted Answer · 2012-08-06 17:38:02Z

Peter Olson is correct. However, the more modern (correct?) way of doing this is by using function.bind(obj, val). Introduced somewhat recently, function.bind allows you to pass variables by value and in certain contexts. Read more here.

So, you could write something like this:

function transform(ar) {
    var alStr = [];
    var O = function(x) { return x }
    for(var a in ar) {
        alStr.push(O.bind(null, ar[a]));
    }
    return alStr; 
}

var a = ["a", 24, 12345];
var b = transform(a);
console.log(a[2]);
b[2]();

This is a more correct paradigm due to the fact that initiating closures has very clear implications. Using bind, however, tends to be a functional approach to be used specifically when function calling (in particular contexts or with particular stipulations).

Using a with block also has some downsides (there are plenty of questions about it).

Bonus: If you wanted b to also represent subsequent changes to the a array, this solution solves that problem:

function transform(ar) {
    var alStr = [];
    var O = function(x) { return ar[x] }
    for(var a in ar) {
        alStr.push(O.bind(null, a));
    }
    return alStr; 
}

var a = ["a", 24, 12345];
var b = transform(a);
console.log(a[2]);
console.log(b[2]());
console.log("*********");
a[2] = "new value!";
console.log(a[2]);
console.log(b[2]());

Collectives™ on Stack Overflow

Javascript closure?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related