ES Modules (import/export)

Also Known As

TL;DR

Explanation

ES Modules (ESM, ES2015) use import and export statements for static, lexically scoped module boundaries. Named exports: export function fn() {} — import { fn } from './mod.js'. Default exports: export default class Foo — import Foo from './mod.js'. Dynamic imports: const mod = await import('./mod.js') — lazy-loads a module, returns a Promise. Key properties: modules are singletons (imported once, cached), strict mode by default, top-level await supported, and static analysis enables tree-shaking (dead code elimination). Compared to CommonJS (require/module.exports): ESM is statically analysable and natively supported in browsers; CJS is dynamic and synchronous. Node.js supports both; use .mjs or "type": "module" in package.json for ESM.

Common Misconception

Why It Matters

Common Mistakes

• Mixing ES module import and CommonJS require() in the same file — causes runtime errors.
• Not using named exports for utility functions — default exports cannot be tree-shaken as effectively.
• Circular imports that cause undefined references at runtime — restructure to break the cycle.
• Dynamic import() not used for code-splitting — large bundles load everything even when unused.

Code Examples

// Global script pollution — all vars accessible everywhere:
<script src="utils.js"></script>  <!-- Adds Utils to window -->
<script src="app.js"></script>    <!-- Overwrites if same variable names -->

// ES modules — scoped, explicit:
import { formatDate, formatCurrency } from './utils.js';
export function renderOrder(order) { /* ... */ }

// Named exports — import by name
// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14159;

// main.js
import { add, PI } from './math.js';
import { add as sum } from './math.js'; // alias

// Default export — one per file
// logger.js
export default class Logger { log(msg) { console.log(msg); } }

// main.js
import Logger from './logger.js'; // any name works

// Dynamic import — code splitting / lazy loading
const button = document.querySelector('#load-chart');
button.addEventListener('click', async () => {
  const { Chart } = await import('./chart.js'); // loaded on demand
  new Chart(document.querySelector('#canvas'));
});

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Tags

Related Terms