A small JavaScript oddity?

Posted by on Sep 18, 2013 in JavaScript

The more you work with JavaScript, the better you understand its nuances. One particular gotcha that forms a great technical interview question is what is the produced output from the following snippet of code:

Obviously the result is:

1 2 3

Right? Given that the timeout is zero, so the code executes immediately doesn’t it?

If fact, the output is:

4 4 4

That is because, by the time the loop exits the value of i has been incremented to 4 before termination.
The important factor to note here is the single-threaded nature of JavaScript.

In fact, what is happening is that the loop executes to completion before any event handlers fire (i.e the setTimeout). By the time they do fire, i===4 and therefore it is written out as per the above.

In other languages such as C#, Java etc. this would have output as expected,but with JS? Nope.

Understanding this is key to understanding eventing in JavaScript.