JavaScript Modules Tutorial — Learn Modules in JavaScript

JavaScript Tutorial: Modules

ES Modules, CommonJS, named exports, default exports, dynamic imports, and organising real-world JavaScript projects.

Split code across files

A 10,000-line single file is impossible to maintain. Modules let you split code into focused files, import what you need, and hide everything else.

JavaScript has two module systems: **CommonJS** (the original Node.js way) and **ES Modules** (the modern standard). Understanding both is essential because you'll encounter both in the wild.

What you'll learn in this JavaScript modules tutorial

This interactive JavaScript tutorial has 7 hands-on exercises. Estimated time: 18 minutes.

Named exports — Named exports let you export multiple things from one file. The importer picks what they need.
ES Modules syntax — The modern (ES Module) syntax:
CommonJS — require/module.exports — Node.js was originally built on CommonJS (before ES Modules existed):
Re-exporting — barrel files — A 'barrel' file (`index.js`) re-exports from multiple modules, creating a single import point:
Dynamic imports — Regular `import` is static — it runs at module load time. **Dynamic imports** load code on demand:
import.meta — `import.meta` provides metadata about the current module:
Build a plugin system — Final challenge — no starter code.

JavaScript Modules concepts covered

Split code across files

JavaScript Tutorial: Modules

ES Modules, CommonJS, named exports, default exports, dynamic imports, and organising real-world JavaScript projects.

Split code across files

A 10,000-line single file is impossible to maintain. Modules let you split code into focused files, import what you need, and hide everything else.

JavaScript has two module systems: **CommonJS** (the original Node.js way) and **ES Modules** (the modern standard). Understanding both is essential because you'll encounter both in the wild.

What you'll learn in this JavaScript modules tutorial

This interactive JavaScript tutorial has 7 hands-on exercises. Estimated time: 18 minutes.

Named exports — Named exports let you export multiple things from one file. The importer picks what they need.
ES Modules syntax — The modern (ES Module) syntax:
CommonJS — require/module.exports — Node.js was originally built on CommonJS (before ES Modules existed):
Re-exporting — barrel files — A 'barrel' file (`index.js`) re-exports from multiple modules, creating a single import point:
Dynamic imports — Regular `import` is static — it runs at module load time. **Dynamic imports** load code on demand:
import.meta — `import.meta` provides metadata about the current module:
Build a plugin system — Final challenge — no starter code.

JavaScript Modules concepts covered

Split code across files