All 10 ES Modules questions
More in ES Modules
How do you import everything from a module under one namespace object? What's the difference between ES Modules and CommonJS (require/module.exports)? What is tree-shaking and why does it require ES Module syntax? How do dynamic imports (import()) differ from static import statements? What does 'live binding' mean for ES Module exports, and how does it differ from CommonJS? How does top-level await work, and what constraint does it place on modules that import that module? What are import maps and what problem do they solve for browser-native ES Modules? Why can circular module imports (Module A imports B, which imports A) cause subtle bugs?
Advertisement
JavaScript › ES Modules

Why are ES Module imports 'hoisted' and evaluated before the rest of the module's code runs?

Intermediate

Answer

The JS engine statically analyzes all import declarations first and resolves/executes the imported modules before running the importing module's own top-level code, ensuring all bindings are available regardless of where the import statement appears in the file.
console.log(PI); // works even though import is written below
import { PI } from './constants.js';
Real-world example Relying on imported constants or functions being available immediately at the top of a file's execution.

Common follow-ups: Does this mean import order in the file affects behavior?

Scope Hoisting & Closures
All 10 ES Modules questions