# JavaScript Modules: Import and Export Explained

## Why We Need Modules

In the early days of the web, scripts were loaded one after another. This led to several "code organization nightmares":

*   **Global Namespace Pollution:** Variables from one file would accidentally overwrite variables in another.
    
*   **Dependency Confusion:** It was hard to tell which file relied on which other file.
    
*   **Maintenance Scars:** Changing a function in one file could break a hidden dependency five files away.
    

Modules turn your codebase from a tangled ball of yarn into a set of **organized LEGO bricks**.

* * *

## The Import/Export Flow

Think of a module as a high-security building. Everything inside is private by default.

1.  **Export:** You "unlock" specific doors to let certain functions or values out.
    
2.  **Import:** Another file "reaches in" through those doors to bring those values into its own scope.
    

* * *

## 1\. Exporting: Sharing Your Code

There are two ways to share code from a module: **Named Exports** and **Default Exports**.

### Named Exports

Use these when you want to export multiple things from a single file. You must use the exact name when importing them later.

JavaScript

```plaintext
// math-logic.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const PI = 3.14;
```

### Default Exports

Use this when a file has one "main" thing to offer (like a single class or a primary function). You can only have **one** default export per file.

JavaScript

```plaintext
// UserProfile.js
export default function UserProfile(name) {
  this.name = name;
}
```

* * *

## 2\. Importing: Using Shared Code

Once you've exported something, you bring it into another file using the `import` keyword.

### Importing Named Exports

You must wrap the names in curly braces `{ }`.

JavaScript

```plaintext
import { add, PI } from './math-logic.js';

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

### Importing Default Exports

You don't use curly braces, and you can actually rename the import whatever you like.

JavaScript

```plaintext
import User from './UserProfile.js'; 

const me = new User('Gemini');
```

* * *

## Comparison: Default vs. Named Exports

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>Named Export</strong></p></td><td colspan="1" rowspan="1"><p><strong>Default Export</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Quantity</strong></p></td><td colspan="1" rowspan="1"><p>Multiple per file</p></td><td colspan="1" rowspan="1"><p>Only one per file</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Import Syntax</strong></p></td><td colspan="1" rowspan="1"><p><code>import { name } from '...'</code></p></td><td colspan="1" rowspan="1"><p><code>import anyName from '...'</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Naming</strong></p></td><td colspan="1" rowspan="1"><p>Must match the export name</p></td><td colspan="1" rowspan="1"><p>Can be renamed freely</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Best For</strong></p></td><td colspan="1" rowspan="1"><p>Utility libraries, math functions</p></td><td colspan="1" rowspan="1"><p>Main components, classes</p></td></tr></tbody></table>

* * *

## Benefits of Modular Code

*   **Reusability:** Write a "Date Formatter" once and use it in ten different projects.
    
*   **Encapsulation:** Keep complex logic hidden inside the module and only export the simple "buttons" the rest of the app needs to press.
    
*   **Predictability:** Because you explicitly list your imports at the top of the file, you can see exactly what a file depends on at a glance.