Modules

JavaScript modules let you split code into separate files with explicit dependencies. Two module systems dominate: ES Modules (ESM, the language standard) and CommonJS (CJS, the Node.js legacy system).

ES Modules (ESM)

• Syntax: import { foo } from './module.js' and export function foo() {}.
• Imports are static — resolved at parse time before any code executes. This means import statements cannot appear inside if blocks or functions.
• Static analysis enables tree-shaking: bundlers like Webpack and Rollup can detect and remove unused exports from the final bundle.
• ESM runs in strict mode by default. Each module has its own scope — no global pollution.
• Supports export default for a single primary export and named exports for multiple values.
• Top-level await is supported in ESM — you can await at the module's top level without wrapping in an async function.
• Enable in Node.js with "type": "module" in package.json or .mjs file extension.

CommonJS (CJS)

• Syntax: const foo = require('./module') and module.exports = { foo }.
• Imports are dynamic — require() executes at runtime and can appear anywhere, including inside conditionals or loops.
• No tree-shaking by default because the dependency graph isn't known until runtime.
• Modules are loaded synchronously — require() blocks until the module is fully loaded. Fine for server-side Node.js, problematic for browsers.
• require() caches modules after first load — subsequent require() calls return the cached object.
• Still powers millions of npm packages and most existing Node.js codebases.

Named vs Default Exports

• Named exports: export { foo, bar } — imported by exact name with destructuring: import { foo, bar } from './mod'.
• Default export: export default function() {} — imported with any name: import myFunc from './mod'.
• Prefer named exports for tree-shaking — default exports import the entire module, making it harder for bundlers to eliminate unused code.
• You can mix both: a module can have one default export and multiple named exports.

Dynamic Imports

• import('./module.js') returns a Promise and loads the module at runtime. Available in both ESM and CJS contexts.
• Enables code splitting — load modules on demand instead of upfront. Critical for reducing initial bundle size in web applications.

Module Resolution

• Node.js with CJS: looks for node_modules, .js, then index.js in directories.
• Node.js with ESM: requires explicit file extensions in relative imports ('./foo.js', not './foo').
• Bundlers (Webpack, Vite) add their own resolution logic, often allowing extensionless imports.

Key Interview Distinction: Static vs Dynamic ESM imports are statically analyzable — the dependency graph is known before execution, enabling tree-shaking and faster startup. CJS imports are dynamic — require() can be conditional and computed at runtime, offering flexibility but preventing static optimization. This is the fundamental tradeoff and the most commonly asked distinction.