# JavaScript Modules: Import and Export Explained

JavaScript feels simple at first… until your entire project ends up inside one file.

At the beginning, you might write everything together — variables, functions, API calls, UI logic. It works… but only for a while. As your project grows, that single file becomes harder to read, debug, and maintain.

That’s where JavaScript modules come in.

Modules help you split your code into smaller, focused files — and connect them using `import` and `export`.

* * *

## The Problem Before Modules

Imagine writing everything in one file:

```js
const products = ["Shoes", "Shirt", "Watch"];

function formatPrice(price) {
  return `₹${price}`;
}

function calculateDiscount(price, discount) {
  return price - price * (discount / 100);
}

function addToCart(product) {
  console.log(`${product} added to cart`);
}

function loginUser(username) {
  console.log(`${username} logged in`);
}
```

Looks okay… but scale this up and you’ll face problems:

*   Hard to read
    
*   Difficult to reuse code
    
*   Debugging becomes messy
    
*   Team collaboration gets painful
    

* * *

## What is a Module?

A module is simply a file with a specific responsibility.

Example structure:

```plaintext
project/
│── app.js
│── mathUtils.js
│── auth.js
│── cart.js
```

Each file does one job:

*   `mathUtils.js` → calculations
    
*   `auth.js` → login/logout
    
*   `cart.js` → cart logic
    

* * *

## Why Modules Are Needed

Modules bring structure.

Instead of chaos, you get:

*   Clear separation of logic
    
*   Better readability
    
*   Easier maintenance
    
*   Reusable code
    

Think of modules like building blocks instead of one giant block.

![](https://cdn.hashnode.com/uploads/covers/696a3cd3f0b435e59823a2c4/37a3b1a8-aafa-4160-9241-b6a73ee65d70.png align="center")

* * *

## Exporting Functions or Values

To use code from another file, you need to export it.

### Named Exports

```js
// mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
```

Import:

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

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

👉 Uses `{ }` 👉 Names must match exactly

* * *

### Export After Declaration

```js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

export { add, subtract };
```

* * *

### Exporting Variables

```js
// config.js
export const appName = "ShopEasy";
export const taxRate = 18;
```

* * *

## Default Export

Used when a file has one main thing.

```js
// greet.js
export default function greet(name) {
  return `Hello, ${name}`;
}
```

Import:

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

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

👉 No `{ }` 👉 Can rename during import

* * *

## Default vs Named Exports

### Named Export

```js
export const add = (a, b) => a + b;

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

### Default Export

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

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

### Key Differences

*   Named → uses `{ }`
    
*   Default → no `{ }`
    
*   Named → multiple allowed
    
*   Default → only one per file
    
*   Named → exact name required
    
*   Default → flexible naming
    

* * *

## Using Both Together

```js
// user.js
export const age = 21;

export default function getUser() {
  return "Joydeep";
}
```

```js
import getUser, { age } from "./user.js";
```

* * *

## Import Everything

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

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

* * *

## Real Example

```js
// price.js
export function formatPrice(price) {
  return `₹${price}`;
}

export function addTax(price) {
  return price + price * 0.18;
}
```

```js
// cart.js
export default function addToCart(product) {
  return `${product} added`;
}
```

```js
// app.js
import addToCart from "./cart.js";
import { formatPrice, addTax } from "./price.js";

const finalPrice = addTax(1000);

console.log(addToCart("Sneakers"));
console.log(formatPrice(finalPrice));
```

* * *

## Benefits of Modular Code

*   Better organization
    
*   Easier maintenance
    
*   Reusability
    
*   Easier debugging
    
*   Cleaner teamwork
    

* * *

## Common Mistakes

❌ Forgetting `{ }` for named imports ❌ Using `{ }` with default exports ❌ Mixing too many responsibilities in one file

* * *

## When to Use What?

👉 **Use named exports**

*   Multiple utilities
    

👉 **Use default export**

*   One main function/component
    

* * *

## Final Thoughts

Modules are not just a feature — they change how you think about code.

Instead of writing one huge script, you build your application in small, manageable pieces.

That’s what makes your code scalable and professional.

* * *

## Quick Recap

*   Modules = separate files
    
*   `export` → share code
    
*   `import` → use code
    
*   Named exports use `{ }`
    
*   Default exports don’t
    
*   Modular code = clean + scalable
    

* * *

## Practice Questions

1.  Why are modules important?
    
2.  Difference between default and named export?
    
3.  How to export multiple functions?
    
4.  How to import everything from a module?
    

* * *