JS Startup

Challenges, Tips & Tricks & Tutorials

JavaScript Quiz – can setTimeout in the for loop print values

JavaScript Quiz – can setTimeout in the for loop print values

setTimeout in for loop –

The setTimeout in for loop is an important concept to go through. As we know the working of setTimeout and for loop. But we still give some little about both of them.

setTimeout –

The setTimeout is a timer function which executes a certain code after defined amount of time.

SetTimeout contain two parameter a callback function which executes after defined time and time in milliseconds and their are some addition parameter which pass to function.

It’s syntax looks like –

setTimeout(function, milliseconds, param1, param2, …)

For more detail about JavaScript setTimeout click here.

for loop –

A for loop is used to repeat certain amount code. It’s very good for iterating array and bunch of other task which required repetition.

It’s syntax looks like –

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

For more detail about javascript for loop click here.

JavaScript Question

In this javascript quiz code, let’s find out can setTimeout in the for loop print values as it expected because there is a delay of 1000 ms.

First, declare a for loop and in for loop statement we create variable i using var keyword and assign value 0 to it.

Then in the second statement, we apply a condition that variable i is less than 5 and in the next statement, we are incrementing the value of i.

for(var i =0; i < 5; i++;){ … }

Now in the for loop, we declaring a setTimeout with function and 1000 millisecond at which function execute, and inside the function, we just console log the value of i.

setTimeout(function() { console.log(i); }, 1000);

Any idea, what should be the output of the console log or what value it prints and why.

Answer – 5, 5, 5, 5

Click To Run Code

Explanation

Now, you know the answer is 5, 5, 5, 5 But why it should be 1, 2, 3, 4 because it just execute after 1 second. Even if we do not use setTimeout the output is 1, 2, 3, 4.

Let me explain –

It’s correct that when you don’t use setTimeout it will print 1, 2, 3, 4. But in the setTimeout things changed.

So, the main reason for output 5, 5, 5, 5 is the scope of variable i in Javascript var keyword does not support block scope.

That’s why when setTimeout trigger in the timer queue of javascript they shared the same variable i which 5 after all iteration completed.

JavaScript closure

If you know the closure of javascript, the console.log has access to i = 5. which is defined as an outer layer of the setTimeout.

Now, even if you set the time from 1000 milliseconds to 0 milliseconds the output remain same. Because setTimeout not execute immediately.

Because all-timer related task finishes in timer queue which takes time to run because it runs synchronous task first which is in a stack.

At last, That’s why we get an answer “5, 5, 5, 5“.

Let me know in the comment section, how you fix this.

I hope you understand the concept and logic behind it.

But wait, i have something more for you –

Check out our other javascript quiz – 

  1. JavaScript Quiz – array filter method can filter odd value
  2. JS Quiz – var in a block scope work
  3. JavaScript Quiz – string split method really a case sensitive
  4. JS Quiz – does typeof of Symbol really give a string

Conclusion

To participate in our javascript quiz or challenges, tutorial, tips & tricks make sure to join our jsstartup newsletter. So, you can able to participate in our daily challenges & learn the javascript concept.

And last but not the least, don’t forget to like, comment and share. It gives us a morale boost to remain to continue. Also, join our Facebook Page

If you have any questions, please feel free to ask me in the comment section and also let me know if you have any suggestions. As suggestions are always welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top
0 Shares
Share via
Copy link