Skip to main content
Stack Overflow
  1. About
  3. For Teams

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Required fields*

JavaScript closure inside loops – simple practical example 

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);
 });
}
<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

... or asynchronous code, e.g. using Promises:

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));
for (var i = 0; i < 3; i++) {
 // Log `i` as soon as each promise resolves.
 wait(i * 100).then(() => console.log(i));
}

It is also apparent in for in and for of loops:

const arr = [1,2,3];
const fns = [];
for (var i in arr){
 fns.push(() => console.log("index:", i));
}
for (var v of arr){
 fns.push(() => console.log("value:", v));
}
for (const n of arr) {
 var obj = { number: n }; // or new MyLibObject({ ... })
 fns.push(() => console.log("n:", n, "|", "obj:", JSON.stringify(obj)));
}
for(var f of fns){
 f();
}

What’s the solution to this basic problem?

Answer*

Draft saved
Draft discarded
Cancel
4
  • 6
    any explanation about the }(i)); ? Commented Apr 6, 2018 at 1:32
  • 5
    @aswzen I think it passes i as the argument index to the function. Commented Jul 26, 2018 at 22:01
  • 1
    it is actually creating local variable index. Commented Mar 15, 2019 at 15:17
  • 3
    Immediately Invoke Function Expression, aka IIFE. (i) is the argument to the anonymous function expression that is invoked immediately and index becomes set from i. Commented Apr 14, 2020 at 5:51

lang-js

AltStyle によって変換されたページ (->オリジナル) /