What is the defined execution order of ES6 imports?

by

JavaScript modules are evaluated asynchronously. However, all imports are evaluated prior to the body of module doing the importing. This makes JavaScript modules different from CommonJS modules in Node or <script> tags without the async attribute. JavaScript modules are closer to the AMD spec when it comes to how they are loaded. For more detail, see section 16.6.1 of Exploring ES6 by Axel Rauschmayer.

Thus, in the example provided by the questioner, the order of execution cannot be guaranteed. There are two possible outcomes. We might see this in the console:

one
two
three

Or we might see this:

two
one
three

In other words, the two imported modules could execute their console.log() calls in any order; they are asynchronous with respect to one another. But they will definitely be executed prior to the body of the module that imports them, so "three" is guaranteed to be logged last.

The asynchronicity of modules can be observed when using top-level await statements (now implemented in Chrome). For example, suppose we modify the questioner’s example slightly:

// main.js
import './one.js';
import './two.js';
console.log('three');

// one.js
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('one');

// two.js
console.log('two');

When we run main.js, we see the following in the console (with timestamps added for illustration):

[0s] two
[1s] one
[1s] three

Update as of ES2020

Per petamoriken’s answer, it looks like evaluation order is guaranteed for non-async modules as of ES2020. So, if you know none of the modules you’re importing contain top-level await statements, they will be executed in the order in which they are imported. In the case of the questioner’s example, the console output will always be:

one
two
three

More Related Contents:

  1. Which browsers support import and export syntax for ECMAScript 6?
  2. ES6: import module from URL
  3. How will browsers handle ES6 import/export syntax
  4. Is it possible to import modules from all files in a directory, using a wildcard?
  5. Pass options to ES6 module imports
  6. `export const` vs. `export default` in ES6
  7. Node.js plans to support import/export ES6 (ECMAScript 2015) modules
  8. using brackets with javascript import syntax
  9. ES6 Modules: Undefined onclick function after import
  10. ES2015 import doesn’t work (even at top-level) in Firefox
  11. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  12. ES6 Destructuring and Module imports
  13. Is using an ES6 import to load specific names faster than importing a namespace?
  14. Javascript ES6 export const vs export let
  15. ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
  16. How can I alias a default import in JavaScript?
  17. Are ES6 module imports hoisted?
  18. Not recommended to use “use strict” in ES6?
  19. Inlining ECMAScript Modules in HTML
  20. What is the difference between importing a function expression or a function declaration from a ES6 module?
  21. ES2015 “import” not working in node v6.0.0 with with –harmony_modules option
  22. Re-export default in ES 6 modules
  23. Output an ES module using webpack
  24. How to correctly use ES6 “export default” with CommonJS “require”?
  25. How does JavaScript import find the module without an extension?
  26. ES6 Dynamic class names
  27. Are HTMLCollection and NodeList iterables?
  28. spread operator vs array.concat()
  29. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  30. How to bind methods when destructuring an object in JavaScript?

Leave a Comment