title: How does JavaScript's ES6 import work with circular dependencies?
body: <p><strong>test.html</strong></p>
  
  <pre><code>&lt;script type="module" src="./B.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>A.js</strong></p>
  
  <pre><code>import {bar} from './B.js';
  import {test} from './B.js';
  
  export function foo() {
      bar();
  }
  
  test();
  console.log("IN A");
  </code></pre>
  
  <p><strong>B.js</strong></p>
  
  <pre><code>import {foo} from './A.js';
  
  export function bar() {
      if (Math.random()) {
          foo();
      }
  }
  
  export function test() {
      console.log("test");
  }
  
  console.log("IN B");
  </code></pre>
  
  <p>The output is:</p>
  
  <pre><code>B.js:30 test
  A.js:24 IN A
  B.js:33 IN B
  </code></pre>
  
  <p>Why is "In B" the last line of code that gets executed? Also, if in test.html, <code>src="./A.js"</code>, "IN B" is the first line that gets executed.</p>