# JavaScript Modules: Import and Export 

In this article we'll understand the JavaScript modules with simple explanations. Imagine having your JavaScript projects growing, keeping all code in one file becomes messy. That’s why modules exist. Let’s go step-by-step in a clear beginner-friendly way.

### Why Modules Are Needed

Imagine writing everything in one file. Small code files seems handleable but what if it becomes 5000+ or 10000+ . That is where the nightmare of developer's begin. Your code becomes hard to find, maintain, naming conflicts arises and reusing code becomes hard to impossible.

That is where Module comes to rescue you from the mess we just discussed.

### What is module?

Think of module as splitting code into separate files, where each file handles one responsibility.

We can see here:

```javascript
project --

        -- math.js 
        -- greeting.js 
        -- app.js
```

Each becomes a module as each file has single responsibility. This makes code clean, organized and reusable. Saving us from a lot of headache.

### Exporting functions or values

Remember that a module only exposes things you export. Anything not exported stays private to the file.

for example:

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

Here we are exporting add and multiply function so we can use them in other files.

We can export not only functions but other things as well, let's see them.

**Exporting Variables:**

```javascript
export const PI = 3.14;
```

**Exporting Objects:**

```javascript
export const user = {
  name: "Sam",
  age: 25
};
```

What we can understand from this is that whatever you export becomes available for other files as well.

### Importing Modules

Above we learnt that to make one file available we have to export it but that was only 50% of the module story, there is something call importing the modules which complete the entire story. We import the needed files to use them after making them available by exporting them. And this completes the 100% of module story.

for example:

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

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

**Import Multiple Things**

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

**Import Everything**

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

console.log(math.add(2,3));
console.log(math.multiply(2,3));
```

When we write this, we are importing everything that is exported from `math.js` and grouping it into a single object called `math` and internally it behaves like this:

```javascript
math = { 
add: function,
multiply: function,
}
```

### Default vs Named Exports

This is one of the most confusing topics , so let’s break it clearly.

**Named Export**

You export multiple things by name.

### math.js

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

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

Import

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

Notice the curly braces `{}`

Because we are importing by name.

### Default Export

A module can have only one default export.

**greeting.js**

```javascript
export default function greet(name) {
  return "Hello " + name;
}
```

Import

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

No `{}` needed.

For default export we can do something like this:

### Example

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

You can import it like:

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

or

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

In conclusion the name does not matter. (Yup! it does not matter, I find it quite interesting)

### Benefits of modular code

Modules provide several advantages when building JavaScript applications.

***Better organization***  
Breaking code into modules makes large projects easier to navigate and understand.

***Code reusability***  
Functions and utilities written in one module can be reused across different parts of the project.

***Easier maintenance***  
If something breaks, developers can quickly locate the module responsible for the issue and fix it.

***Team collaboration***  
Different developers can work on different modules at the same time without interfering with each other’s work.

***Encapsulation***  
Modules allow developers to hide internal implementation details and only expose the necessary parts of the code.

### Summary

As JavaScript applications grow in size, modules become an essential tool for keeping projects organized, scalable, and maintainable. It save us a lot of time and headache!