# JavaScript Modules – Organizing Code Into Reusable Files

Over the past 49 days, I've built a strong foundation in JavaScript.

I've learned variables, functions, arrays, objects, DOM manipulation, events, forms, APIs, Promises, and asynchronous JavaScript.

Today, I started learning about **JavaScript Modules**.

As applications become larger, putting all our JavaScript code into one file becomes difficult to manage.

Modules allow us to split our code into smaller, organized, and reusable files.

Let's dive in.

* * *

# What is a JavaScript Module?

A **module** is a JavaScript file whose code can be shared with other JavaScript files using:

```javascript
export
```

and:

```javascript
import
```

Instead of having everything in one file:

```text
script.js
```

we can organize our application:

```text
project/
│
├── index.html
│
├── main.js
│
├── math.js
│
└── user.js
```

Each file can have its own responsibility.

* * *

# Why Do We Need Modules?

Imagine a large application containing:

*   Authentication logic
    
*   API functions
    
*   UI functions
    
*   Utility functions
    
*   Database logic
    
*   Form validation
    

Putting everything into one file would become difficult to maintain.

Modules allow us to separate these responsibilities.

For example:

```text
auth.js
    ↓
Authentication

api.js
    ↓
API requests

utils.js
    ↓
Utility functions

main.js
    ↓
Application entry point
```

This makes the code easier to understand and maintain.

* * *

# Exporting a Function

Suppose we have a file called:

```text
math.js
```

Inside it:

```javascript
export function add(a, b) {

    return a + b;

}
```

The `export` keyword makes the function available to other modules.

* * *

# Importing a Function

Now inside another file:

```text
main.js
```

we can import it:

```javascript
import { add } from "./math.js";

console.log(add(10, 20));
```

Output:

```text
30
```

Now `main.js` can use functionality defined inside `math.js`.

* * *

# Named Exports

We can export multiple values from a module.

```javascript
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}
```

Then import them:

```javascript
import { add, subtract } from "./math.js";

console.log(add(10, 5));

console.log(subtract(10, 5));
```

These are called **named exports**.

* * *

# Importing With an Alias

We can give an imported value a different local name.

```javascript
import { add as sum } from "./math.js";

console.log(sum(10, 20));
```

The original exported name is `add`, but inside this file we're using `sum`.

* * *

# Default Export

A module can also have one **default export**.

Example:

```javascript
export default function greet(name) {

    return `Hello, ${name}`;

}
```

We can import it without curly braces:

```javascript
import greet from "./greet.js";

console.log(greet("Saurabh"));
```

* * *

# Named Export vs Default Export

| Named Export | Default Export |
| --- | --- |
| Uses `export` | Uses `export default` |
| Imported with `{}` | Imported without `{}` |
| Can have multiple per module | One default export per module |
| Import name normally matches exported name | Import name can be chosen |

Example:

```javascript
import { add } from "./math.js";
```

vs.

```javascript
import greet from "./greet.js";
```

* * *

# Using Modules in HTML

To use JavaScript modules in the browser, we need:

```html
<script type="module" src="./main.js"></script>
```

The important part is:

```text
type="module"
```

This tells the browser that the JavaScript file should be treated as an ES module.

* * *

# Module Scope

Modules have their own scope.

For example:

```javascript
const secret = "Hello";

export function showSecret() {

    console.log(secret);

}
```

The `secret` variable isn't automatically available in other modules.

Only values that we explicitly export can be imported elsewhere.

This helps prevent accidental global variables.

* * *

# Importing Everything

We can import multiple named exports under a namespace.

```javascript
import * as math from "./math.js";

console.log(math.add(10, 20));

console.log(math.subtract(20, 10));
```

Here, `math` becomes an object containing the exported functions.

* * *

# Reusing Modules

One of the biggest benefits of modules is **reusability**.

For example, we can create:

```text
utils.js
```

```javascript
export function formatName(name) {

    return name.trim().toUpperCase();

}
```

Then reuse it in multiple files:

```javascript
import { formatName } from "./utils.js";

console.log(formatName("saurabh"));
```

The same utility can be reused throughout the application.

* * *

# Modules and Project Structure

As applications grow, modules help create a cleaner structure.

For example:

```text
src/
│
├── main.js
│
├── api/
│   └── api.js
│
├── utils/
│   └── helpers.js
│
└── components/
    └── user.js
```

Each module can focus on a specific responsibility.

This is a major step toward writing scalable applications.

* * *

# Modules vs One Large File

### Without Modules

```text
main.js

1000+ lines
    ↓
Hard to navigate
Hard to maintain
Hard to reuse
```

### With Modules

```text
main.js
api.js
utils.js
auth.js
users.js
```

Each file has a clear responsibility.

* * *

# Best Practices

✔ Keep modules focused on a specific responsibility.

✔ Use meaningful file names.

✔ Export only what other modules actually need.

✔ Avoid unnecessary global variables.

✔ Prefer named exports when they make the API of a module clearer.

✔ Keep your project structure organized as it grows.

✔ Use `type="module"` when running ES modules directly in the browser.

* * *

# My Biggest Takeaway

Today is a special day because I've reached **Day 50** of my #100DaysOfCode journey. 🚀

I learned that modules allow me to break large JavaScript applications into smaller, reusable pieces.

Instead of having one huge JavaScript file, I can separate functionality into different modules and connect them using:

`export` **→** `import`

This isn't just about writing less code—it's about writing code that is **organized, reusable, maintainable, and scalable**.

The concepts I've learned so far are now starting to connect:

**JavaScript → DOM → Events → APIs → Promises → Modules**