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:

export

and:

import

Instead of having everything in one file:

script.js

we can organize our application:

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:

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:

math.js

Inside it:

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:

main.js

we can import it:

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

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

Output:

30

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

---

Named Exports

We can export multiple values from a module.

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

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

Then import them:

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.

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:

export default function greet(name) {

    return `Hello, ${name}`;

}

We can import it without curly braces:

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:

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

vs.

import greet from "./greet.js";

---

Using Modules in HTML

To use JavaScript modules in the browser, we need:

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

The important part is:

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:

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.

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:

utils.js

export function formatName(name) {

    return name.trim().toUpperCase();

}

Then reuse it in multiple files:

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:

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

main.js

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

With Modules

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