JS Modules

JavaScript Modules: Splitting Code with import and export

JavaScript ES modules (ESM) let you split large applications into focused files that explicitly share functions, classes, and constants. Every module runs in its own private scope in strict mode, preventing global variable leaks across files.

Named Exports vs. Default Exports

JavaScript modules support two complementary export styles:

• Named exports (export const ..., export function ...): A file can have many named exports, imported using matching curly braces import { formatTax, TAX_RATE } from "./tax.js";.
• Default exports (export default ...): Each module can have at most one default export, imported without braces under any local name import UserCard from "./UserCard.js";.

Named exports are easier to refactor in large teams because IDE rename tools track exact symbol names across every file.

Static vs. Dynamic import() Example

Static import statements sit at the top of a file for tree-shaking and bundle analysis, while dynamic import() loads heavy features lazily only when needed.

// mathUtils.js (module exports)
export const PI = 3.14159;
export function circleArea(radius) {
  return PI * radius * radius;
}
export default function formatUnits(val, unit = "px") {
  return `${val}${unit}`;
}

// app.js (module consumer)
// import formatUnits, { circleArea } from "./mathUtils.js";
console.log("Area r=3:", Number(circleArea(3).toFixed(2)));
console.log("Formatted:", formatUnits(24));

// Lazy-loading syntax for heavy optional charts:
// const { renderChart } = await import("./charts.js");

Common Mistakes to Avoid

• Omitting type="module" in browser HTML: Loading an ES module via <script src="app.js"></script> without type="module" throws SyntaxError: Cannot use import statement outside a module.
• Forgetting file extensions in native ESM: Browser native imports and Node.js ESM require exact paths like ./tax.js rather than ./tax.
• Importing from file:// directly: Browsers block ES module imports over file:// due to CORS rules. Always run a local dev server like Vite or npx serve.

Frequently Asked Questions

What is the difference between ES Modules and CommonJS (require)?

ES Modules (import/export) are the official JavaScript standard supported in both browsers and Node.js, enabling static analysis and tree-shaking. CommonJS (require/module.exports) is an older synchronous Node.js-only format.

Can I rename an imported symbol to avoid a name clash?

Yes, use as inside braces: import { format as formatDate } from "./date.js";.

Do module scripts block HTML rendering?

No, <script type="module"> behaves like defer automatically, downloading in parallel and executing only after HTML parsing finishes.