JavaScript Modules: Import and Export Explained

In the early days of web development, JavaScript was like a giant kitchen where every chef worked on the same counter. If one chef needed salt and another needed sugar, they’d often grab the wrong jar because everything was out in the open. As apps grew, this "one big pile of code" approach led to bugs that were nearly impossible to track down.

JavaScript Modules changed everything. They gave us a way to build "private kitchens" isolated files where code stays safe until we explicitly decide to share it.

Here is what we’ll cover in this guide:

• Why modules are actually necessary

• How to share code using Exports

• How to pull code into files using Imports

• The difference between Default and Named exports

• The long-term benefits of modular code

---

Why Modules are Needed

Before modules (ES6), every variable you created lived in the Global Scope. If you had two different script files that both used a variable named user, they would overwrite each other, causing the app to crash or behave weirdly.

Modules solve this by providing encapsulation. A variable created inside a module stays inside that module. It doesn't leak out and mess with other parts of your project unless you tell it to.

---

Exporting: "Sharing the Goods"

To make a function or a variable available to other files, you use the export keyword. Think of this as putting an item in a "public window" so others can see and take it.

You can export things as you define them:

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

---

Importing: "Requesting the Goods"

Once a file has exported something, another file can "ask" for it using the import keyword. You have to tell JavaScript exactly what you want and which file it’s coming from.

// main.js
import { add, multiply } from './math.js';

console.log(add(2, 3)); // 5

---

Default vs. Named Exports

This is often the most confusing part for beginners, but it's simpler than it looks:

• Named Exports: You can have many per file. When importing them, you must use the exact name inside curly braces { }.

• Default Exports: You can only have one per file. It represents the "main" thing that file does. When importing a default, you don't use curly braces, and you can even rename it to whatever you want.

Example of Default export:

// User.js
export default class User { ... }

// App.js
import MyUserClass from './User.js'; // Notice: No curly braces!

---

Benefits of Modular Code

Why go through the trouble of splitting files?

• Maintainability: If there’s a bug in your "Login" logic, you know exactly which file to open. You don't have to scroll through 3,000 lines of code.

• Reusability: You can write a perfect formatDate function once and import it into ten different projects.

• Readability: Small files are easier for humans to understand. It makes the "flow" of the application clear just by looking at the import statements at the top of a file.

---

Conclusion

JavaScript Modules are the backbone of modern web development. They turned the "giant pile of code" into an organized library of Lego bricks that we can snap together as needed. By mastering import and export, you aren't just writing code you’re designing a system that is easy to scale, test, and share.