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*

Another way that hasn't been mentioned yet is the use of [`Function.prototype.bind`][1]





 var funcs = {};
 for (var i = 0; i < 3; i++) {
 funcs[i] = function(x) {
 console.log('My value: ' + x);
 }.bind(this, i);
 }
 for (var j = 0; j < 3; j++) {
 funcs[j]();
 }



**UPDATE**

As pointed out by @squint and @mekdev, you get better performance by creating the function outside the loop first and then binding the results within the loop.





 function log(x) {
 console.log('My value: ' + x);
 }

 var funcs = [];

 for (var i = 0; i < 3; i++) {
 funcs[i] = log.bind(this, i);
 }

 for (var j = 0; j < 3; j++) {
 funcs[j]();
 }





 [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Draft saved

Draft discarded

Edit Summary*

Cancel

This is what I do these days too, I also like lo-dash/underscore's _.partial

Bjorn
– Bjorn

2014年12月08日 05:18:31 +00:00
Commented Dec 8, 2014 at 5:18
21

.bind() will be largely obsolete with ECMAScript 6 features. Besides, this actually creates two functions per iteration. First the anonymous, then the one generated by .bind(). Better use would be to create it outside the loop, then .bind() it inside.

user1106925
– user1106925

2015年06月28日 03:29:07 +00:00
Commented Jun 28, 2015 at 3:29
6

@squint @mekdev - You both are correct. My initial example was written quickly to demonstrate how bind is used. I've added another example per your suggestions.

Aust
– Aust

2015年06月29日 16:23:27 +00:00
Commented Jun 29, 2015 at 16:23
5

I think instead of wasting computation over two O(n) loops, just do for (var i = 0; i < 3; i++) { log.call(this, i); }

user2290820
– user2290820

2015年09月11日 12:14:20 +00:00
Commented Sep 11, 2015 at 12:14
1

.bind() does what the accepted answer suggests PLUS fiddles with this.

niry
– niry

2017年01月08日 05:55:07 +00:00
Commented Jan 8, 2017 at 5:55

| Show 1 more 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*