How does a function in a loop (which returns another function) work? [duplicate]

by

When you assign the function to the click handler, a closure is created.

Basically a closure is formed when you nest functions, inner functions can refer to the variables present in their outer enclosing functions even after their parent functions have already executed.

At the time that the click event is executed, the handler refers to the last value that the i variable had, because that variable is stored on the closure.

As you noticed, by wrapping the click handler function in order to accept the i variable as an argument, and returning another function (basically create another closure) it works as you expect:

for ( var i = 0; i < 4; i++ ) {
  var a = document.createElement( "a" );
  a.onclick = (function(j) { // a closure is created
    return function () {
      alert(j); 
    }
  }(i));
  document.getElementById( "foo" ).appendChild( a );
}

When you iterate, actually create 4 functions, each function store a reference to i at the time it was created (by passing i), this value is stored on the outer closure and the inner function is executed when the click event fires.

I use the following snippet to explain closures (and a very basic concept of curry), I think that a simple example can make easier to get the concept:

// a function that generates functions to add two numbers
function addGenerator (x) { // closure that stores the first number
  return function (y){ // make the addition
    return x + y;
  };
}

var plusOne = addGenerator(1), // create two number adding functions
    addFive = addGenerator(5);

alert(addFive(10)); // 15
alert(plusOne(10)); // 11

More Related Contents:

  1. JavaScript closure inside loops – simple practical example
  2. Event handlers inside a Javascript loop – need a closure?
  3. Please explain the use of JavaScript closures in loops [duplicate]
  4. Access outside variable in loop from Javascript closure [duplicate]
  5. Doesn’t JavaScript support closures with local variables? [duplicate]
  6. removeEventListener on anonymous functions in JavaScript
  7. JavaScript variable binding and loop
  8. (…()) vs. (…)() in javascript closures [duplicate]
  9. Javascript: closure of loop?
  10. Javascript closure not working
  11. Closures in a for loop
  12. passing index from for loop to ajax callback function (JavaScript)
  13. Javascript closures – variable scope question
  14. Passing values to onclick [duplicate]
  15. Closure in Javascript [duplicate]
  16. How are local variables referenced in closures? [duplicate]
  17. JavaScript Variable Scope [duplicate]
  18. javascript closure immediate evaluation [duplicate]
  19. For-each over an array in JavaScript
  20. window.onload vs document.onload
  21. How do I pass the value (not the reference) of a JS variable to a function? [duplicate]
  22. How to find out which JavaScript events fired?
  23. For loop through Array only shows last value
  24. JavaScript flattening an array of arrays of objects
  25. Detect mousemove when over an iframe?
  26. Remove key press delay in Javascript
  27. Event Capturing vs Event Bubbling [duplicate]
  28. How to make a setInterval stop after some time or after a number of actions?
  29. Detecting an image 404 in Javascript
  30. Setting onclick to use current value of variable in loop [duplicate]

Leave a Comment