Flashcards
Javascript Interview questions
Cards in this deck (1)
- 1What will be the output of the following code for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000 ); }The code sample shown will not display the values 0, 1, 2, 3, and 4 as might be expected;
rather, it will display 5, 5, 5, 5, and 5.
The reason for this is that each function executed within the loop will be executed after the entire loop has completed and all will therefore reference the last value stored in i, which was 5.
Closures can be used to prevent this problem by creating a unique scope for each iteration, storing each unique value of the variable within its scope, as follows:
for (var i = 0; i < 5; i++) {
(function(x) {
setTimeout(function() { console.log(x);
}, x * 1000 );
})(i);
}
This will produce the presumably desired result of logging 0, 1, 2, 3, and 4 to the console.
In an ES2015 context, you can simply use let instead of var in the original code:
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, i * 1000 ); }