What is the problem of creating closures inside loops?

Q: What is the problem of creating closures inside loops?

for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } Explanation: When the loop runs, the `setTimeout` callbacks are scheduled, and the closures inside them capture the reference to the variable `i`. The closures don't have their own copy of `i`; they share a reference to the same `i` variable. As the loop iterates, the value of `i` changes until it reaches `3`. Since the closures capture the reference to `i`, when they finally execute, they use the latest value of `i`, which is `3`. Solution: To avoid this problem, you can create a new scope inside each iteration of the loop to capture the current value of `i`. This can be achieved using an Immediately Invoked Function Expression (IIFE) or by using the `let` keyword, which has block-level scope: Using IIFE: for (var i = 0; i < 3; i++) { (function(index) { setTimeout(function() { console.log(index); }, 1000); })(i); } Using `let`: for (let i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); }

Difficulty: 6/10

lexical scope, memory management, event loop

When closures are created inside loops, they capture the variables from the surrounding environment, including the loop's variables. Since closures retain references to these variables by capturing the entire environment, they don't actually store the current value of those variables; instead, they maintain references to the variables themselves. As a result, if the loop continues to execute and update its variables, the closures created inside the loop will use the updated values, which might not be the expected behaviour.

In this example, you might expect the output to be `0`, `1`, and `2` printed each after a second. However, the actual output will be `3`, `3`, and `3`, all printed after one second. This is because the closures created by the `setTimeout` function capture the variable `i`, and by the time the closures execute (after one second), the loop has already been completed and `i` has the final value of `3`.

What is the issue:

1
Explanation: When the loop runs, the setTimeout callbacks are scheduled, and the closures inside them capture the reference to the variable i. The closures don't have their own copy of i; they share a reference to the same i variable. As the loop iterates, the value of i changes until it reaches 3. Since the closures capture the reference to i, when they finally execute, they use the latest value of i, which is .

javascript

Scenario Questions

0-2 years experience

Follow-up Questions