title: What is the order of execution in a JavaScript 'for' loop?
body: <p>This post is kind of a simplified version of this post:</p>
  
  <p><a href="https://stackoverflow.com/questions/29664531/what-is-the-exact-order-of-execution-of-javascripts-for-loop">What is the exact order of execution of Javascript&#39;s for loop?</a></p>
  
  <p>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.</p>
  
  <pre><code>for (let i = 0; i &lt; 10; i++) {
    alert(i);
  };
  </code></pre>
  
  <p>So from my understanding, this is as far as I get in understanding the order in which something like this is executed:</p>
  
  <p>1) The engine initializes <code>i = 0</code></p>
  
  <p>2) The engine checks that <code>i &lt; 10</code></p>
  
  <p>3) The engine pops out of the parenthesis that hold the for statement</p>
  
  <p>4) The engine executes the code within the loop for this iteration</p>
  
  <p>5) The engine pops back into the parenthesis to increment <code>i</code>, </p>
  
  <p>6) Repeat from step 2. </p>
  
  <p>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? </p>
  
  <p>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.... <em>unless</em> 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. </p>
  
  <p>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 ;) </p>
  
  <p><strong>Figured it Out:</strong>
  <a href="https://i.stack.imgur.com/4YzW2.png" rel="nofollow noreferrer">Click for an image of my breakpoint placement</a></p>
  
  <p>I've learned that the order goes like this:
  1) <code>var i</code> is initialized to <code>0</code></p>
  
  <p>2) <code>var i</code> is checked for truthy</p>
  
  <p>3) If true, code is executed, </p>
  
  <p>4) Once execution is finished, <code>i</code> is incremented</p>
  
  <p>5) One incremented, <code>i</code> is checked for truthy</p>
  
  <p>6) Repeat steps 3 - 5 until <code>i</code> is falsy</p>
  
  <p>7) Iteration finished. </p>
  
  <p>Thanks everybody. The Chrome debugger is a lot more powerful than I thought!</p>