ES Modules: Import & Export

Learn how to split your JavaScript into organized, reusable files using the modern module system.

Step 1 of 5

Why modules exist

In the early days of the web, all JavaScript went into one giant file. As websites grew, this became a nightmare — thousands of lines of code, naming collisions (two functions with the same name overwriting each other), and no clear way to organize things. Modules solve this by letting you split code into separate files, each with its own scope. A module only exposes what it explicitly exports, and other files only get what they explicitly import.

This is how every large JavaScript project is organized today. Google, YouTube, Amazon — they all use modules to manage millions of lines of code split across thousands of files.

Think of it this way: Modules are like departments in a company. The Accounting department exports financial reports. The Marketing department imports those reports when they need the numbers. Each department keeps its internal work private — Marketing doesn't see Accounting's scratch calculations, only the finished report.

Web Standard

ES Modules (ESM) were introduced in ES2015 (ES6) and are now the official standard module system for JavaScript. Browsers support them natively with `<script type="module">`. Older systems like CommonJS (`require()`) are still used in Node.js but are not the browser standard.

Learn more on MDN

JavaScript modules