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!

mttvlk
  • 33
  • 1
  • 1
  • 11
  • Other than _pops out of the parenthesis_ being rather _going to the next line_ what's your question exactly? – Lixus Oct 12 '17 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. – Bergi Oct 12 '17 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 – Sagiv b.g Oct 12 '17 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. – Pointy Oct 12 '17 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? – Bergi Oct 12 '17 at 18:00
  • @Sag1v well it's inside the `for` context, which does include the header expressions (which I'm sure you know; I'm just being pedantic for future readers). – Pointy Oct 12 '17 at 18:01
  • @Pointy well, that's a good **piont** (you earned your name alright!) hehe – Sagiv b.g Oct 12 '17 at 18:03
  • @Sag1v I don't think the OP is concerned about the scope of the `i` variable, which [is much more complicated for `let` than for `var`](https://stackoverflow.com/q/30899612/1048572) indeed. – Bergi Oct 12 '17 at 18:05
  • @Bergi hmm, it seems to me that this is part of his confusion, _"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...."_ i think the OP suggests that the `i` is in a different context. – Sagiv b.g Oct 12 '17 at 18:08
  • @Sag1v I think your last comment cleared it up "OP suggests that the i is in a different context" I'm starting to understand, I guess I need to sit on this for a minute and figure out how to re-word what I'm asking for. Lol, maybe I'm reading too far into for loops! Especially now after reading that comment asking if I know how "while" loops work, for loops are just a version of while loops. Thank you to everybody who replied, you are all awesome!! – mttvlk Oct 12 '17 at 18:45

1 Answers1

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.

esion
  • 198
  • 1
  • 8
  • 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! – mttvlk Oct 12 '17 at 18:52
  • @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.. – esion Oct 12 '17 at 18:53