JS Modules

JavaScript Modules: ES Modules (import / export) & Dynamic Imports

ES Modules (ESM) provide a standardized module format for organizing JavaScript code into separate maintainable files. Modules establish explicit file scopes, preventing global namespace pollution.

ES Module Architecture

flowchart TD
    ModuleA["auth.js (Export Module)"] --> ExportNamed["export const login = () => {}"]
    ModuleA --> ExportDefault["export default class AuthManager {}"]
    
    ModuleA --> ModuleB["app.js (Import Module)"]
    ModuleB --> ImportNamed["import { login } from './auth.js'"]
    ModuleB --> ImportDefault["import AuthManager from './auth.js'"]

Export / Import Styles Comparison

Practical Code Example

// Simulated ES Module Export & Import Structure

// ==========================================
// File: utils/mathUtils.js (Module Exports)
// ==========================================
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// Default export
export default function calculator(operation, a, b) {
  if (operation === "add") return add(a, b);
  return multiply(a, b);
}

// ==========================================
// File: main.js (Module Imports)
// ==========================================
// import calculator, { PI, add as sum } from "./utils/mathUtils.js";

// Demonstrating Dynamic Import (Lazy Loading)
async function loadHeavyFeature() {
  console.log("Loading module dynamically...");
  // const heavyModule = await import("./heavyFeature.js");
  // heavyModule.run();
}

Best Practices & Gotchas

• Use File Extensions in Browser Imports: Browsers require explicit relative paths and file extensions (import { fn } from "./utils.js").
• Single Default Export Per File: A module file can have multiple named exports, but at most ONE export default.
• Dynamic import() for Code Splitting: Use import("module-path") to lazy-load heavy modules on demand inside event handlers to improve initial bundle loading speed.

Self-Check Challenge

Explain the difference between import { user } from "./user.js" and import user from "./user.js".