Edit - Stack Overflow

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*

Rev

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*

The most simple solution would be,

Instead of using:

 var funcs = [];
 for(var i =0; i<3; i++){
 	funcs[i] = function(){
 		alert(i);
 	}
 }
 
 for(var j =0; j<3; j++){
 	funcs[j]();
 }

which alerts "2", for 3 times. This is because anonymous functions created in for loop, shares same closure, and in that closure, the value of `i` is the same. Use this to prevent shared closure:

 var funcs = [];
 for(var new_i =0; new_i<3; new_i++){
 	(function(i){
 		funcs[i] = function(){
 			alert(i);
 		}
 	})(new_i);
 }
 
 for(var j =0; j<3; j++){
 	funcs[j]();
 }

The idea behind this is, encapsulating the entire body of the for loop with an [IIFE][1] (Immediately-Invoked Function Expression) and passing `new_i` as a parameter and capturing it as `i`. Since the anonymous function is executed immediately, the `i` value is different for each function defined inside the anonymous function.

This solution seems to fit any such problem since it will require minimal changes to the original code suffering from this issue. In fact, this is by design, it should not be an issue at all!


 [1]: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

Draft saved

Draft discarded

Edit Summary*

Cancel

2

Read something similar in a book once. I prefer this, too, since you don't have to touch your existing code (as much) and it becomes obvious why you did it, once you've learned the self-calling function pattern: to trap that variable in the newly created scope.

DanMan
– DanMan

2013年07月26日 11:18:39 +00:00
Commented Jul 26, 2013 at 11:18
1

@DanMan Thanks. Self calling anonymous functions are very good way to deal javascript's lack of block level variable scope.

Kemal Dağ
– Kemal Dağ

2013年07月26日 12:20:44 +00:00
Commented Jul 26, 2013 at 12:20
3

Self-calling, or self-invoking is not the appropriate term for this technique, IIFE (Immediately-Invoked Function Expression) is more accurately. Ref: benalman.com/news/2010/11/…

jherax
– jherax

2015年10月27日 04:29:35 +00:00
Commented Oct 27, 2015 at 4:29

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

JavaScript closure inside loops – simple practical example

Answer*