0

Please find my snippet here, 

for (var i=0;i<11;i++) {
  setTimeout( () => console.log(i), 10);
}

How it print 11 for 11 times? since i was set < 11?

if i console it without function it print 1-10 .

for (var i=0;i<11;i++) {
  setTimeout( console.log(i), 10);
}

this gives me 1-10. i am wonder how its getting changed if i include function without condition?

Improve this question
9
  • 2
    There's only one i, and when the timers fire its value is 11. Commented Jun 21, 2017 at 18:17
  • to expand on what @Pointy said, setTimeout is an asynchronous function, so by the time the first log happens, the for loop has already finished running (it performs i++ until i<11 is false, and the first time that happens is when i === 11) Commented Jun 21, 2017 at 18:19
  • Because variables are references​ Commented Jun 21, 2017 at 18:19
  • @PatrickBarr which alos explains why it starts printing with 1. If there were no setTimeout() then it would print 0..10, not 1..11. Commented Jun 21, 2017 at 18:20
  • 1
    Also no one has mentioned the second one will print the numbers without waiting, setTimeout will receive the result of calling console.log Commented Jun 21, 2017 at 18:31

2 Answers 2

Reset to default
2

Root case for: 

for (var i=0;i<11;i++) {
  setTimeout( console.log(i), 10);
}

that console.log will be triggered directly (without any delay), so it should be:

for (var i=0;i<11;i++) {
  setTimeout(function () { console.log(i); }, 10);
}

that will give directly the same result as for ES6

Right way will be by using closures:

for (var i=0;i<11;i++) {
    ((i) => { 
        setTimeout(() => console.log(i), 10);
    })(i);
}

The reason for that that we have a single-threaded model in JavaScript. So, all setTimeout will be executed after for-cycle.

In addition it can be used let:

for (let i=1; i<=11; i++) {
    setTimeout(() => console.log(i), 10);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Given the question asks explicitly about ES6, no this is not the solution.
Hm... setTimeout( console.log(i), 10); - console.log will be executed outside the setTimeout. That's the case...
I've updated the answer
No, that's not what I meant. I meant you should not use IIFEs to introduce scopes in ES6.
@Bergi, what would you suggest in that case? It's rather common solution: github.com/getify/You-Dont-Know-JS/blob/master/…
|
1 
for (var i=0;i<11;i++) {
  setTimeout( () => console.log(i), 10);
}
  1. Do reference for i
  2. Push on stack timeout
  3. i++
  4. Push on stack timeout

  5. i++

    ... when js has free main "thread" after execution of for loop

    10 ms after pushing timeout AND while main "thread" is free - push the first timeout to main "thread", referenced variable has value 11 because for loop is done. Do this for every timeout.

The expected output can be archived by:

for (var i=0;i<11;i++) {
  const num = i;
  setTimeout(() => console.log(num), 10);
}

Const num stores the value of i to the time of execution. After that it is garbagecollected.

Improve this answer

6 Comments

Have you tried to execute it?) Check the last number.
Perfectly fine. It is returning stack. You can do null && before timeout
you are calling console.log immediately on every iteration of the loop and passing the return value of that to setTimeout which would be undefined. Not delaying the call to console.log. Try increasing the setTimeout delay to something larger like 10000 and you will see that it isn't delaying anything.
@JonathanKuhn right! sorry for mistake. Fixed
@FieryCat And what is the issue? The 33 and 44 that is logged is not from the console.log, it would likely be the internal id from the last setTimeout call (return value from setTimeout). When running code in the console, it will automatically log the return value from the last called function. Aside from that, it looks perfectly fine.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.