# JavaScript Modules: Import and Export Explained

When we first learn JavaScript, we usually write everything in one file.

Example:

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

function multiply(a, b) {
  return a * b;
}

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

This works fine for small programs. But real applications become very large.

A project may contain: hundreds of functions, API calls , authentication code, database logic , utility functions. Putting everything into one file becomes messy. This is why JavaScript modules exist.

### Why Modules Are Needed

Imagine one giant JavaScript file with thousands of lines.

```text
app.js
│
├── login code
├── payment code
├── API code
├── utility functions
├── UI code
└── database code
```

Problems: hard to read, difficult to find code , difficult to reuse functions , difficult to maintain

### What is a JavaScript Module?

A module is simply:

> A JavaScript file that can share code with other files.

* * *

### Example Project

```javascript
project/
│
├── math.js
├── user.js
└── app.js
```

Each file does something different.

* * *

### Exporting Functions or Values

To use code from another file, we first export it.

### Example

## math.js

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

Here we exported the `add()` function.

Now other files can use it.

### Importing Modules

Now another file can import that function.

### app.js

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

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

Output:

```text
5
```

### Import/Export Flow

```text
math.js
   ↓ exports add()
app.js
   ↓ imports add()
Uses the function
```

* * *

### Default Export

Sometimes a file exports only one main thing.

For that, JavaScript provides: default export

### Example

## greet.js

```javascript
export default function greet() {
  console.log("Hello");
}
```

* * *

### Importing Default Export

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

greet();
```

Output:

```text
Hello
```

## Named Export vs Default Export

### Named Export

```javascript
export function add() {}
```

Import:

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

Uses `{}` braces.

* * *

## Default Export

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

Import:

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

No `{}` needed.

* * *

### Simple Difference

| Named Export | Default Export |
| --- | --- |
| Can export many things | Usually one main thing |
| Uses `{}` while importing | No `{}` needed |

## ELI5: Named Export vs Default Export

Imagine you have a toy box. Inside the box:

```text
🧸 Teddy Bear
🚗 Toy Car
⚽ Football
```

Now you want to share toys with your friend.

JavaScript exports work similarly.

* * *

### Named Export (ELI5)

Named export is like putting labels on every toy.

```text
🧸 "teddy"
🚗 "car"
⚽ "football"
```

Your friend must ask using the exact name.

* * *

Example

```js
export const car = "Toy Car";

export const ball = "Football";
```

Importing:

```js
import { car, ball } from "./toys.js";
```

Reacting mentally:

```text
"Give me the toy named car"
"Give me the toy named ball"
```

That’s why it is called **named export**.

You import using the same names.

* * *

## Default Export (ELI5)

Default export is different.

Imagine the box has one main special toy.

```text
📦 Main Toy Inside
```

Your friend can call it anything they want.

* * *

### Example

```js
export default "Toy Car";
```

Importing:

```js
import myToy from "./toys.js";
```

or even:

```js
import car from "./toys.js";
```

or:

```js
import banana from "./toys.js";
```

All work.

Because default export has no fixed import name.

* * *

### Simple Difference

### Named Export

```js
export const add = () => {};
```

Import:

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

Must use same name.

* * *

### Default Export

```js
export default function() {}
```

Import:

```js
import anythingName from "./file.js";
```

Any name works.

* * *

### Easy Memory Trick

## Named Export

```text
Has a label/name
```

You must use that name.

* * *

## Default Export

```text
Main default thing
```

You can rename it while importing.

* * *

### Visual Example

```text
Named Export
-------------
📦
├── add
├── subtract
└── multiply

Import using exact names


Default Export
--------------
📦
└── One main thing

Import with any name
```

* * *

## Real Example Together

## math.js

```js
export const PI = 3.14;

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

export default function greet() {
  console.log("Hello");
}
```

* * *

## app.js

```js
import greet, { PI, add } from "./math.js";

greet();

console.log(PI);

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

* * *

### Final ELI5 Summary

| Named Export | Default Export |
| --- | --- |
| Many things can be exported | Usually one main thing |
| Must import using same name | Can import with any name |
| Uses `{}` | No `{}` needed |