The var i goes over the array length

Question

I came across the following interview question:

var arr = [ 10, 12, 15, 21 ];

for(var i = 0; i < arr.length; i++) {
  //console.log('outside timeout ' + i)
  setTimeout(function(){
    console.log('Index: ' + i + ', element: ' + arr[i])
  }, 3000)
}

by the time setTimeout runs the loop has finished running. But, how does i inside the setTimeout outputs 4? Shouldn't it stop at 3?

https://codepen.io/AlexanderWeb00/pen/vjXmBo

Duplicate of https://stackoverflow.com/questions/49958556/why-does-settimeout-behave-incorrectly-inside-a-for-loop. It is only touching a `closure`. @Satpal — deEr., Apr 27 '18 at 10:59
at the end, the value of the variable is always greater than the last value to be true in the check, because this works as exit condition after the last increment. it has nothing to do with the timeout. the timeout uses the last value, because oof the value at the time where the timeout is calling the function. — Nina Scholz, Apr 27 '18 at 12:14

Nikhil Aggarwal · Accepted Answer · 2018-04-27T11:04:36.360

2

Wrap setTimeout around an IIFE

var arr = [ 10, 12, 15, 21 ];

for(var i = 0; i < arr.length; i++) {
  //console.log('outside timeout ' + i)
  (function(i){
        setTimeout(function(){
           console.log('Index: ' + i + ', element: ' + arr[i])
        }, 3000)
    })(i);
}

Reasoning - var are functional scope variables and even if specified in a if/for/while will be available in the whole function. The condition governs the number of times the loop will run, which over here breaks when i becomes 4. However, when the timeout function is executed for the i=0 or i=1 and others, i has already reached 4 as it has completed the for loop. Hence, you need to explicitly pass the value of i using an IIFE.

Also, if you are using ES6 and above, you can use let also specified by Satpal in comments.

var arr = [ 10, 12, 15, 21 ];

for(let i = 0; i < arr.length; i++) {
  //console.log('outside timeout ' + i)
  setTimeout(function(){
    console.log('Index: ' + i + ', element: ' + arr[i])
  }, 3000)
}

edited Apr 27 '18 at 11:04

answered Apr 27 '18 at 10:56

Nikhil Aggarwal

28,197
4
43
59

That's great, but what's causing i to be 4? – Aessandro Apr 27 '18 at 10:56
1

@Alex or, use `let` instead of `var` i.e. `for(let i = 0; i < arr.length-1; i++) {` – Satpal Apr 27 '18 at 10:57
1

what about "i < arr.length"? – Aessandro Apr 27 '18 at 10:59
1

The `final expression i++` is run after the `loop body`. In time it gets there `i==4` already. Then `i – deEr. Apr 27 '18 at 11:02
1

array length is 4 so loop will run 4 times for index 0 to 3 as 3 < 4. It is as simple as that – kritikaTalwar Apr 27 '18 at 11:02
@Alex - I have added reasoning and alternates. Hope it helps and clarifies. – Nikhil Aggarwal Apr 27 '18 at 11:08
1

@nikhilagw it does indeed. Thank you – Aessandro Apr 27 '18 at 11:10
@Alex - Good to hear that :) – Nikhil Aggarwal Apr 27 '18 at 12:16

The var i goes over the array length

1 Answers1