If you've ever opened a JavaScript file and found 3,000 lines of tangled functions, global variables clashing with each other, and no clear structure — you already understand why modules exist, even if you haven't used them yet.
Modules are one of the most important concepts in modern JavaScript. They solve a fundamental problem: how do you split your code into organized, reusable, and maintainable pieces without everything falling apart?
In this guide, we'll start from the problem modules solve, then walk through how to export, import, and structure your code like a professional developer. No bundler configuration. No framework abstractions. Just vanilla JavaScript and the module system built into the language itself.
Table of Contents
- The Problem: Why Your Code Falls Apart Without Modules
- What Are JavaScript Modules?
- Setting Up Your First Module
- Exporting: Sharing Code From a Module
- Importing: Using Code From Other Modules
- Default Exports vs Named Exports
- When to Use Default vs Named Exports
- Re-Exporting: Cleaning Up Your Import Paths
- Benefits of Modular Code
- Common Mistakes and Gotchas
- Wrapping Up
The Problem: Why Your Code Falls Apart Without Modules
Let's paint a realistic picture. You're building a small web app — maybe a task manager. In the beginning, everything lives in one file:
javascript
// app.js — the "everything" file
let tasks = [];
let currentFilter = "all";
function addTask(title) {
const task = { id: Date.now(), title, completed: false };
tasks.push(task);
renderTasks();
}
function deleteTask(id) {
tasks = tasks.filter((task) => task.id !== id);
renderTasks();
}
function toggleTask(id) {
const task = tasks.find((task) => task.id === id);
if (task) task.completed = !task.completed;
renderTasks();
}
function renderTasks() {
const list = document.getElementById("task-list");
list.innerHTML = "";
const filtered = filterTasks(tasks, currentFilter);
filtered.forEach((task) => {
const li = document.createElement("li");
li.textContent = task.title;
if (task.completed) li.classList.add("done");
list.appendChild(li);
});
}
function filterTasks(tasks, filter) {
if (filter === "active") return tasks.filter((t) => !t.completed);
if (filter === "completed") return tasks.filter((t) => t.completed);
return tasks;
}
// ... 200 more lines for event handlers, localStorage, date formatting, etc.