JavaScript Modules: Import and Export Explained

It become difficult to manage if all our code lives in a single file. As your project grows, keeping everything in one place leads to confusion, duplicated logic, and code that’s hard to maintain.

That’s exactly where JavaScript modules come in.

Modules help you split your code into smaller, reusable files so your project stays clean, organized, and scalable.

In this article, we’ll understand:

• Why modules are needed

• How to export functions or values

• How to import modules

• Default vs named exports

• Benefits of modular code

• Best practices for beginners

---

Why Do We Need Modules?

Imagine building a JavaScript project with everything inside one file:

• Functions

• Variables

• Utility logic

• API calls

• UI logic

• Event handlers

At first, it feels manageable. But as the project grows:

• The file becomes huge

• Finding bugs gets harder

• Reusing code becomes messy

• Different parts of code start depending on each other in confusing ways

Problem with a Single File

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

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

function formatCurrency(amount) {
  return `₹${amount}`;
}

const taxRate = 0.18;

// many more lines...

This works in small demos, but in real applications, it becomes hard to manage.

---

What Is a JavaScript Module?

A module is simply a separate JavaScript file that contains code related to a specific purpose.

For example:

• math.js → math functions

• utils.js → helper functions

• api.js → API-related logic

• auth.js → authentication logic

Each file can export what it wants to share and import what it needs from other files.

In simple words:

• Export = “Make this available to other files”

• Import = “Use something from another file”

Real- life example:-

Think of modules like departments in a company:

HR handles hiring Finance handles payments Tech handles development

Each department has its own responsibility, but they can still work together when needed.

Similarly:

A module focuses on one responsibility Other files can use it without mixing everything together

This makes your code easier to understand and maintain.

Exporting in JavaScript

To share code from one file to another, we use export.

There are two main types:

1. Named Exports

Named exports allow you to export multiple things from the same file.

Example: math.js

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

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

export const PI = 3.14159;

Here, we exported:

add

subtract

PI

Each one has its own name, so they must be imported using the same names.

Important:

When importing named exports, use:

• curly braces {}

• exact exported names

---

Exporting at the Bottom (Another Common Style)

Instead of adding export before every item, many developers define everything first and export at the bottom.

Example:

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

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

const PI = 3.14159;

export { add, subtract, PI };

This style is often preferred because:

• Your logic stays clean at the top

• All exports are visible in one place at the bottom

---

2. Default Export

A default export is used when a file mainly provides one primary thing.

Example: greet.js

export default function greet(name) {
  return `Hello, ${name}!`;
}

This file exports one main function as its default.

---

Importing Default Export

import greet from './greet.js';

console.log(greet('Ritu')); // Hello, Ritu!

Important Difference:

For default imports:

• No curly braces needed

• You can choose any name while importing

Example:

import sayHello from './greet.js';

console.log(sayHello('Ritu'));

Even though the original function is greet, you can import it as sayHello.

---

Default vs Named Exports

This is where many beginners get confused, so let’s make it crystal clear.

---

Named Export

// math.js
export function add(a, b) {
  return a + b;
}

Import:

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

✔ Uses curly braces
✔ Must use exact name

---

Default Export:

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

Import:

import greet from './greet.js';

✔ No curly braces
✔ Name can be changed

Comparison Table

Feature	Named Export	Default Export
Curly braces needed while importing?	Yes	No
Can export multiple items?	Yes	Only one default per file
Import name must match?	Yes	No
Best used for	Utility functions, constants, multiple values	Main feature of a file

---

Can We Use Both in the Same File?

Yes — absolutely.

A file can have:

• one default export

• multiple named exports

Example: user.js

export const role = 'Admin';

export function login() {
  console.log('User logged in');
}

export default function getUser() {
  return { name: 'Ritu', age: 20 };
}

Importing It

import getUser, { role, login } from './user.js';

console.log(getUser()); // { name: 'Ritu', age: 20 }
console.log(role);      // Admin
login();                // User logged in

Syntax Rule:

• Default import comes first

• Named imports go inside {}

---

Folder Structure Example

As projects grow, modules help keep code organized.

Example

project/
│
├── index.html
├── app.js
├── math.js
├── utils.js
└── api.js

math.js

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

utils.js

export function formatCurrency(amount) {
  return `₹${amount}`;
}

app.js

import { add } from './math.js';
import { formatCurrency } from './utils.js';

const total = add(100, 50);
console.log(formatCurrency(total)); // ₹150

This is much cleaner than keeping everything in one file.

---

How Modules Improve Maintainability

This is one of the biggest reasons modules matter.

Without Modules

• One huge file

• Difficult to debug

• Hard to reuse code

• High chance of naming conflicts

• Team members may accidentally change unrelated logic

With Modules

• Small focused files

• Easier to locate bugs

• Reusable code

• Better separation of concerns

• Safer collaboration in teams

• Easier testing

Example:

If your math.js has a bug, you know exactly where to look.
You don’t need to search through 1000+ lines in one file.

That’s the real power of modular code.

---