1

This post is kind of a simplified version of this post:

What is the exact order of execution of Javascript's for loop?

I'm super interested in why I keep getting confused while working with for loops. I'd like to learn how a for loop is executed under the hood.

for (let i = 0; i < 10; i++) {
  alert(i);
};

So from my understanding, this is as far as I get in understanding the order in which something like this is executed:

1) The engine initializes i = 0

2) The engine checks that i < 10

3) The engine pops out of the parenthesis that hold the for statement

4) The engine executes the code within the loop for this iteration

5) The engine pops back into the parenthesis to increment i,

6) Repeat from step 2.

I guess I'm most confused about step #3. Does the engine actually pop out of the 'for' loop to execute the code within the block?

From my understanding, JavaScript is single-threaded and can only run synchronously, and so I'm a little confused at how in the middle of a 'for' statement, the engine can keep the status of the 'for' in memory while executing the code in the block.... unless each of the three conditions in the 'for' loop are their own independent commands, which can be executed and finished before moving on to the commands within the block.

I'm not even sure if I'm asking this question correctly, I'm still relatively new to programming, I only know vanilla JS at this point... next month is when I get into node ;)

Figured it Out: Click for an image of my breakpoint placement

I've learned that the order goes like this: 1) var i is initialized to 0

2) var i is checked for truthy

3) If true, code is executed,

4) Once execution is finished, i is incremented

5) One incremented, i is checked for truthy

6) Repeat steps 3 - 5 until i is falsy

7) Iteration finished.

Thanks everybody. The Chrome debugger is a lot more powerful than I thought!

Improve this question
10
  • Other than pops out of the parenthesis being rather going to the next line what's your question exactly? Commented Oct 12, 2017 at 17:56
  • 1
    I have no idea what you mean by "pop out". The parenthesis are only relevant for syntactical structuring of the code, and have nothing to do with what is actually executed. "each of the three conditions in the 'for' loop are their own independent commands, which can be executed" is exactly to the point. Commented Oct 12, 2017 at 17:58
  • in this case the scope of i is inside the curly braces block. by the way, if you would use the old var key word then i was in the scope of the surrounding function or window if there is no function around the for loop Commented Oct 12, 2017 at 17:58
  • 2
    Each of the three expressions in the loop header are, in fact, synchronous "mini-blocks" of code. The execute synchronously just like everything else. The mental model of "popping" in and out of contexts (especially inline blocks) is not helping you out here. Commented Oct 12, 2017 at 18:00
  • Do you understand how while loops work? Those are probably easier to understand. Also, do you know how an engine "can keep the status" of something like an if statement? Commented Oct 12, 2017 at 18:00

1 Answer 1

Reset to default
2

(Sorry not enough rep to put this in comments)

I would suggest to use the browser debug functionality. I am not sure what browser you are using, but just google "debugging JS with X browser" and there are a lot of tutorials out there.

First, create a simple for loop htm file. Then open your browser and initialize the debugger. Then open the file in your browser. Open the "Sources" portion and your code will be visibile. Click on the line with the for loop and setup a break point, and also create watches on your variables (like i).

Then reload the htm file and the debugger will stop on the breakpoint. Then "step into" the for loop step by step. You will be able to watch how the system is moving through the code looking at each step, you can watch the variables change, and hopefully this will give you some insight into how it is working.

This is a great way to understand any complex code you might have, and to debug errors easily.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This!! This is exactly what I needed. I've got breakpoints on every step of the for loop. I've learned that first, the counter variable is initialized, and it basically turns into a triangle of checking for truthy, executing code, incrementing, checking for truthy, executing code, incrementing, etc. ...Thank you for the suggestion!
@matthewvolk well I am glad I could help. I find it very useful especially in nested for statements with multiple IF clauses. It helps to stop at each step and see what is happening..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.