re: What’s your favorite JS interview question? VIEW POST

FULL DISCUSSION
 

What will output these example? Why?

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

How to fix it to output numbers from 0 to 9?

 

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

 
 

Feel free to run it and prove me wrong, but I believe that it prints 10 ten times, at 1 second intervals.

It's due to binding on the variable I, not the value of I when you create the lambda.

You need to introduce a local variable in the loop body to fix it.

You are wrong, if you use for(let i instead of for(var i it will print 0 to 9 correctly. jsfiddle.net/uh86qx1v/1/

Can you explain why that happens? I'm new to ES6 and learned that let has block scope. When used in the for loop, in conjunction with setTimeOut set to 1000, you would think the console.log would run every 1000 ms for each console.log. But this doesn't happen. When I tried it, the sequence of console.logs appear all at once after 1000 ms. Why does that happen? Is it because setTimeOut, when called 10 times, gets pushed to the stack, then after 1000 ms the stack does its thing and all 10 calls are executed simultaneously?

If you take out the setTimeOut and just do console.log within the for (var i loop you get the correct result as well.

 

It is an excellent question to test how much you understand JS.

 
 

Because answer on this question will discover what answerer know about:

  • Scopes
  • Closures
  • How event loop works in the browser
 

This question is perfect to sieve juniors from those who never ever coded.

 

Fun trivia: setTimeout can have more than two arguments. After the callback function, and the duration, you can pass args for the callback, as well. Instead of working around setTimeout, use setTimeout.

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

(Although I don't even write the for loop, like, ever. It's all map, filter, reduce etc. So I'd rewrite it into something like this:

new Array(10)
   .fill(0)
   .map((x, i) => i)
   .forEach(x => setTimeout(console.log, 100*x, x))
 
  • Using let

for(let i=0; i<10; i++) {
setTimeout(()=>console.log(i),i*500);
};

  • Using bind

for(var i=0; i<10;i++) {
setTimeout(console.log.bind(null,i), i*100);
};

  • Or you can use IIFE

for(var i=0; i<10; i++) {
(function(x){
setTimeout(()=> console.log(x), x*100)
})(i);
};

 

On the bind example, heads up that in some older browsers you need to pass console as the first argument to any console.<method>.bind(). Not that this is a particularly real-world thing to do, but it's bitten me a few times when trying to debug a promise chain in an older browser; I always love to do promise.then(console.log), but in old browsers this breaks until you do promise.then(console.log.bind(console)).

code of conduct - report abuse