JavaScript Modules

Introduction

As JavaScript applications grow in size, managing code becomes increasingly difficult. Writing everything in a single file leads to messy, hard-to-maintain code. To solve this problem, JavaScript introduced Modules.

JavaScript Modules allow you to split your code into separate files, making it easier to organize, reuse, and maintain. With the help of import and export statements, you can share functionality between different files efficiently.

In this article, we will explore JavaScript modules, understand how import and export work, and learn how to use them in real-world applications.

What are JavaScript Modules?

A JavaScript module is simply a file that contains code (variables, functions, classes) that can be exported and reused in other files.

Module = A reusable piece of code stored in a separate file

Why is JavaScript Module used?

JavaScript modules are widely used because they help in building scalable applications.

1. Code Organization

Break large code into smaller files.

2. Reusability

Use the same function in multiple files.

3. Maintainability

Easier to update and debug.

4. Used in Modern Frameworks

React, Angular, Vue—all use modules.

Syntax

JavaScript modules use two main keywords:

export → to share code

import → to use shared code

1. Named Export

In the example below, I created 2 methods, add and sub, with the export keyword.

// file: math.js
export const add = (a, b) => a + b;

export const sub = (a, b) => a - b;

Import Named Export (add and sub) into another file.

// file: result.js
import { add, sub } from './math.js';

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

Output:

2. Default Export

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

Import Default Export

import greet from './greet.js';

console.log(greet("John"));

3. Mixed Export

export const PI = 3.14;

export default function area(r) {
 return PI * r * r;
}

Import Mixed

import area, { PI } from './circle.js';

Example of JavaScript Modules

Let’s understand modules with a complete example.

Step 1: Create a module

// file: utils.js
export function multiply(a, b) {
 return a * b;
}

export function divide(a, b) {
 return a / b;
}

Step 2: Use the module

// file: app.js
import { multiply, divide } from './utils.js';

console.log(multiply(4, 5)); // 20
console.log(divide(10, 2));  // 5

Real-Life Example of E-commerce Website

In this example, you will see the cart module and the payment modules imported into app.js

in cart.js

export function addToCart(item) {
 console.log(item + " added to cart");
}

in payment.js

export function processPayment(amount) {
 console.log("Payment of " + amount + " processed");
}

app.js

import { addToCart } from './cart.js';
import { processPayment } from './payment.js';

addToCart("Laptop");
processPayment(50000);

Common Mistakes of JavaScript Modules

Mostly Beginners make some common mistakes.

1. Forgetting File Extension

❌ Mistake:

import { add } from './math';

✅ Correct:

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

2. Not Using type=”module” in HTML

❌ Mistake:

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

✅ Correct:

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

3. Using Modules Without Server

❌ Mistake:

 Modules may not work properly using file:// protocol.

✅ Correct:

You can use a local server instead of file:// protocol.

Interview Questions

Conclusion

JavaScript Modules are a powerful feature that helps developers organize code efficiently. By using import and export, you can break your application into smaller, reusable pieces, making it easier to manage and scale.