Question

What will be the output of the following code:

for (var i = 0; i < 5; i++) {
setTimeout(function() { (i); }, i * 1000 );
}
Explain your answer. How could the use of closures help here?

Answer 1

The output of the given code will be '5' printed five times at 1-second intervals. This is due to the asynchronous nature of setTimeout and the function-scoped variable 'i'. Using closures, such as an immediately invoked function expression (IIFE), would allow the output to correctly display the numbers 0 to 4, each at 1-second intervals.

Step-by-step explanation:

The provided code sets up a loop that creates five timeouts. When executed, due to the asynchronous nature of setTimeout, and because var is not block-scoped but function-scoped, every callback function passed to setTimeout refers to the same variable i. When the setTimeout callbacks are executed after their respective delays, the loop has already finished running and the value of i has been incremented to 5 for all callbacks. Therefore, each call to setTimeout will output '5', not the values 0 to 4 as might be expected.

To fix this issue, we can use closures to capture the current value of i at each iteration of the loop. A common way to do this is by using an immediately invoked function expression (IIFE) that creates a new scope for the variable:

for (var i = 0; i < 5; i++) { (function(currentI) { setTimeout(function() { console.log(currentI); }, currentI * 1000); })(i); }

This code will output the numbers 0, 1, 2, 3, and 4 at 1-second intervals.