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*

Bit late to the party, but I was exploring this issue today and noticed that many of the answers don't completely address how Javascript treats scopes, which is essentially what this boils down to.

So as many others mentioned, the problem is that the inner function is referencing the same `i` variable. So why don't we just create a new local variable each iteration, and have the inner function reference that instead?

//overwrite console.log() so you can see the console output
 console.log = function(msg) {document.body.innerHTML += '' + msg + '';};

Just like before, where each inner function outputted the last value assigned to `i`, now each inner function just outputs the last value assigned to `ilocal`. But shouldn't each iteration have it's own `ilocal`?

Turns out, that's the issue. Each iteration is sharing the same scope, so every iteration after the first is just overwriting `ilocal`. From [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block#No_block_scope):

> Important: JavaScript does not have block scope. Variables introduced with a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. In other words, block statements do not introduce a scope. Although "standalone" blocks are valid syntax, you do not want to use standalone blocks in JavaScript, because they don't do what you think they do, if you think they do anything like such blocks in C or Java.

Reiterated for emphasis:

>## JavaScript does not have block scope. Variables introduced with a block are scoped to the containing function or script

We can see this by checking `ilocal` before we declare it in each iteration:

//overwrite console.log() so you can see the console output
 console.log = function(msg) {document.body.innerHTML += '' + msg + '';};

var funcs = {};
 for (var i = 0; i < 3; i++) {
 console.log(ilocal);
 var ilocal = i;
 }

This is exactly why this bug is so tricky. Even though you are redeclaring a variable, Javascript won't throw an error, and JSLint won't even throw a warning. This is also why the best way to solve this is to take advantage of closures, which is essentially the idea that in Javascript, inner functions have access to outer variables because inner scopes "enclose" outer scopes.

![Closures][1]

This also means that inner functions "hold onto" outer variables and keep them alive, even if the outer function returns. To utilize this, we create and call a wrapper function purely to make a new scope, declare `ilocal` in the new scope, and return an inner function that uses `ilocal` (more explanation below):

//overwrite console.log() so you can see the console output
 console.log = function(msg) {document.body.innerHTML += '' + msg + '';};

Creating the inner function inside a wrapper function gives the inner function a private environment that only it can access, a "closure". Thus, every time we call the wrapper function we create a new inner function with it's own separate environment, ensuring that the `ilocal` variables don't collide and overwrite each other. A few minor optimizations gives the final answer that many other SO users gave:

//overwrite console.log() so you can see the console output
 console.log = function(msg) {document.body.innerHTML += '' + msg + '';};

**Update**

With ES6 now mainstream, we can now use the new `let` keyword to create block-scoped variables:

//overwrite console.log() so you can see the console output
 console.log = function(msg) {document.body.innerHTML += '' + msg + '';};

Look how easy it is now! For more information see [this answer](https://stackoverflow.com/a/16661498/1852456), which my info is based off of.

[1]: https://i.sstatic.net/60fH9.png

Draft saved

Draft discarded

Edit Summary*

Cancel

8

There is now such a thing as block scoping in JavaScript using the let and const keywords. If this answer were to expand to include that, it would be much more globally useful in my opinion.

user4639281
– user4639281

2017年12月27日 03:12:06 +00:00
Commented Dec 27, 2017 at 3:12
@TinyGiant sure thing, I added some info about let and linked a more complete explanation

woojoo666
– woojoo666

2018年03月01日 22:44:09 +00:00
Commented Mar 1, 2018 at 22:44
@woojoo666 Could your answer also work for calling two alternating URL's in a loop like so: i=0; while(i < 100) { setTimeout(function(){ window.open("https://www.bbc.com","_self") }, 3000); setTimeout(function(){ window.open("https://www.cnn.com","_self") }, 3000); i++ }? (could replace window.open() with getelementbyid......)

nutty about natty
– nutty about natty

2018年05月14日 19:08:24 +00:00
Commented May 14, 2018 at 19:08
@nuttyaboutnatty sorry about such a late reply. It doesn't seem like the code in your example already works. You aren't using i in your timeout functions, so you don't need a closure

woojoo666
– woojoo666

2018年06月03日 22:58:23 +00:00
Commented Jun 3, 2018 at 22:58
whoops, sorry, meant to say "it seems like the code in your example already works"

woojoo666
– woojoo666

2018年06月08日 11:22:45 +00:00
Commented Jun 8, 2018 at 11:22

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*