title: The synchronicity of for...await loops in JavaScript
body: <p>I am trying to visualize the synchronicity of <code>for...await</code> loops in JavaScript.</p>
  
  <p>It appears that in an <code>async</code> generator function <strong>both</strong> <code>yield</code> and <code>await</code> will stop progress and cue up a continuation on a microtask.</p>
  
  <p>In other words: yielding is <em>always</em> asynchronous in this context, <strong>even if you don't use the <code>await</code> keyword</strong>.</p>
  
  <p>Is this correct? What about <code>async</code> generator functions outside of the context of <code>for...await</code> loops?</p>
  
  <p>Below a tight microtask loop is created using <code>then</code>, in an attempt to see how tasks are interleaved.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function printNums() {
      let counter = 0
      function go() {
          console.log(counter++)    
          if(counter &lt; 10) Promise.resolve().then(go)
      }
      Promise.resolve().then(go)
  }
  
  printNums()
  
  async function asyncFn() {
      console.log('inside asyncFn 1')
      await null
      console.log('inside asyncFn 2')
  }
  
  asyncFn()
  
  const asyncIterable = {
      async *[Symbol.asyncIterator]() {
          console.log('inside asyncIterable 1')
          yield '⛱'
          console.log('inside asyncIterable 2')
          await null
          console.log('inside asyncIterable 3')
          yield ''
          yield ''
      }
  }
  
  async function printAsyncIterable() {
      for await(let z of asyncIterable) {
          console.log(z)
      }
  }
  printAsyncIterable()</code></pre>
  </div>
  </div>
  </p>