JavaScript closure inside loops – simple practical example

Question

``` var funcs = []; // let's create 3 functions for (var i = 0; i < 3; i++) { // and store them in funcs funcs[i] = function() { // each should log its value. console.log("My value:", i); }; } for (var j = 0; j < 3; j++) { // and now let's run each one to see funcs[j](); } ``` It outputs this: My value: 3 My value: 3 My value: 3 Whereas I'd like it to output: My value: 0 My value: 1 My value: 2 The same problem occurs when the delay in running the function is caused by using event listeners: ``` var buttons = document.getElementsByTagName("button"); // let's create 3 functions for (var i = 0; i < buttons.length; i++) { // as event listeners buttons[i].addEventListener("click", function() { // each should log its value. console.log("My value:", i); }); } ``` ```

``` … or asynchronous code, e.g. using Promises: ``` // Some async wait function const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, m…

Accepted Answer

Well, the problem is that the variable `i`, within each of your anonymous functions, is bound to the same variable outside of the function.

ES6 solution: `let`

ECMAScript 6 (ES6) introduces new `let` and `const` keywords that are scoped differently than `var`-based variables. For example, in a loop with a `let`-based index, each iteration through the loop will have a new variable `i` with loop scope, so your code would work as you expect. There are many resources, but I'd recommend 2ality's block-scoping post as a great source of information.

```
for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value: " + i);
  };
}
```

Beware, though, that IE9-IE11 and Edge prior to Edge 14 support `let` but get the above wrong (they don't create a new `i` each time, so all the functions above would log 3 like they would if we used `var`). Edge 14 finally gets it right.

ES5.1 solution: forEach

With the relatively widespread availability of the `Array.prototype.forEach` function (in 2015), it's worth noting that in those situations involving iteration primarily over an array of values, `.forEach()` provides a clean, natural way to get a distinct closure for every iteration. That is, assuming you've got some sort of array containing values (DOM references, objects, whatever), and the problem arises of setting up callbacks specific to each element, you can do this:

```
var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});
```

The idea is that each invocation of the callback function used with the `.forEach` loop will be its own closure. The parameter passed in to that handler is the array element specific to that particular step of the iteration. If it's used in an asynchronous callback, it won't collide with any of the other callbacks established at other steps of the iteration.

If you happen to be working in jQuery, the `$.each()` function gives you a similar capability.

Classic solution: Closures

What you want to do is bind the variable within each function to a separate, unchanging value outside of the function:

```
var funcs = [];

function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}

for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}
```

Since there is no block scope in JavaScript - only function scope - by wrapping the function creation in a new function, you ensure that the value of "i" remains as you intended.

JavaScript closure inside loops – simple practical example

Solution

Problem

Related problems