JavaScript Modules: Import and Export

When we start learning JavaScript, we usually write all our code in a single file. This works well for small projects, but as the application grows, managing everything in one place becomes difficult. To solve this problem, JavaScript Modules were introduced.

In this blog, we will understand JavaScript modules from the very basics in a simple and easy way.

The Problem: Code Organization Without Modules

Imagine building a large project like an e-commerce website or a social media platform. If all the code is written in a single file, several problems arise like :

1. Global Namespace Pollution

When variables and functions are declared globally, they can accidentally overwrite each other.

// file1.js
const user = "Radhika";

// file2.js
const user = "Admin";   // This will cause a conflict

2. Difficult to Maintain

As the file grows, it becomes hard to understand which part of the code does what. Debugging and updating the code also becomes time-consuming.

3. Lack of Reusability

Without modules, reusing code in other projects is not straightforward. Developers often end up copying and pasting code.

4. Hard for Team Collaboration

When multiple developers work on the same file, merge conflicts become common, making teamwork inefficient.

5. Tight Coupling

All parts of the code depend on each other, so changing one section may unintentionally affect others.

What Are JavaScript Modules?

A module is simply a JavaScript file that contains related code. Instead of putting everything in one file, we divide the code into smaller, meaningful pieces. Each module can export its functionality, and other modules can import and use it.

In simple words: A module helps us organize code into separate files so that it becomes easier to manage, reuse, and maintain.

How to Use Modules :

1. In the Browser

To use modules in a browser, add the type="module" attribute in the <script> tag:

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

2. In Node.js

For Node.js, add the following line to your package.json:

{
  "type": "module"
}

This allows you to use the modern import and export syntax. There exist one more way through which we can do the same thing but it's syntax is different. We will study that way later.

Exporting Functions or Values

1. Named Exports

Named exports allow you to export multiple functions or values from a module.

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

You can also export them at the end of the file:

const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;

export { multiply, divide };

Importing Modules

To use the exported members in another file, we use the import keyword.

// app.js
import { add, subtract, PI } from './mathUtils.js';

console.log(add(2, 3));       // 5
console.log(subtract(5, 2));  // 3
console.log(PI);              // 3.14159

Renaming Imports

You can rename an imported member using the as keyword:

import { add as sum } from './mathUtils.js';
console.log(sum(4, 6)); // 10

Default vs Named Exports

Default Export

A module can have only one default export. It is used when the module represents a single main functionality.

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

Importing a Default Export:

import greet from './greet.js';
console.log(greet('Radhika'));

Notice that the name used during import (greet) can be anything.

Named Exports

A module can have multiple named exports, and their names must match during import.

// utils.js
export const square = (n) => n * n;
export const cube = (n) => n * n * n;

Importing Named Exports:

import { square, cube } from './utils.js';

Combining Default and Named Exports

// calculator.js
export const add = (a, b) => a + b;

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

// app.js
import multiply, { add } from './calculator.js';

console.log(add(2, 3));      // 5
console.log(multiply(2, 3)); // 6

Quick Comparison: Default vs Named Exports

Feature	Default Export	Named Export
Number per file	Only one	Multiple
Import name	Can be of any name	Must match the exported name
Syntax	export default	export { }
Best for	Main functionality	Utility/ helper function

Benefits of Modular Code

1. Better Code Organization

Dividing code into smaller modules makes it easier to understand and manage.

2. Improved Maintainability

Changes can be made in one module without affecting others.

3. Reusability

Modules can be reused in different projects, saving time and effort.

4. Encapsulation

Only the necessary parts of a module are exposed, keeping internal logic private.

5. Easier Testing

Each module can be tested independently, making debugging simpler.

6. Team Collaboration

Different developers can work on different modules simultaneously without conflicts.

7. Scalability

Modular code makes it easier to scale applications as they grow.

Example: Organizing a Project with Modules

project/
│
├── index.html
├── app.js
├── utils/
│   ├── mathUtils.js
│   └── stringUtils.js
└── services/
    └── apiService.js

📌 mathUtils.js

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

📌 stringUtils.js

export const toUpperCase = (str) => str.toUpperCase();

📌 apiService.js

export default async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

📌 app.js

import { add } from './utils/mathUtils.js';
import { toUpperCase } from './utils/stringUtils.js';
import fetchData from './services/apiService.js';

console.log(add(2, 3));
console.log(toUpperCase('hello'));

So, basically import export are just like :

+------------------+        import        +------------------+
|   mathUtils.js   | ------------------>  |      app.js     | 
|  export add()    |                      |  uses add()      |
+------------------+                      +------------------+

Conclusion

JavaScript modules are a powerful feature that help developers write clean, organized, and maintainable code. By breaking applications into smaller, reusable pieces, modules make development more efficient and collaborative.

Thank you for reading this blog. I am open to feedback and suggestion.

Command Palette