📦 JavaScript Modules

Last Updated: 22nd October 2025

Modules are separate files containing reusable code that can be imported and exported between files.

They make your code:

  • Cleaner 🧼
  • Easier to maintain 🧩
  • Reusable 🔁

Hinglish Tip 🗣: Module ka matlab — “alag file me likha hua code” jise hum import karke kahin bhi use kar sakte hain.

⚙️ Types of Modules

User-Defined Modules: Created by you. Built-in Modules: Part of the JavaScript Standard Library. Third-Party Modules: External libraries.

📦 User-Defined Modules

There are mainly two way to create a module:

  • CommonJS (Node.js)
  • ECMA-Script Module (ES6) (ESM)

CommonJS

Used by Node.js (pre-ES6) and still common in older projects.

Exports Syntax

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

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

module.exports = { add, sub };

Imports Syntax

// file: app.js
const { add, sub } = require("./math.js");

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

Hinglish Tip 🗣: CommonJS me require() hota hai import ke liye aur module.exports hota hai export ke liye.

ES6 Modules

  • Named exports let you export multiple items from a file and import only what you need.
  • Works in both browser (with <script type="module">) and Node.js (modern versions).

Hinglish Tip 🗣: Socho ki tumhare paas ek toolkit hai (functions, constants). Named Export se tum sirf wahi tools share karte ho jo dusre files me chahiye.

Named Export

// file: mathUtils.js

// Named Export
export const pi = 3.1416;
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}
  • You can export each item individually (like above).
  • Or export together at end:
const pi = 3.1416;
function add(a, b) {
  return a + b;
}
function multiply(a, b) {
  return a * b;
}

export { pi, add, multiply };

Hinglish Tip 🗣: Export ke liye ka use hota hai jab multiple items ko ek saath export karte hain.

Importing Named Exports

// file: app.js
import { pi, add } from "./mathUtils.js";

console.log(pi); // 3.1416
console.log(add(2, 3)); // 5
  • Only the imported items are available.
  • Order doesn’t matter, but names must match exactly.

Renaming while Importing

import { add as addition } from "./mathUtils.js";

console.log(addition(5, 7)); // 12

Hinglish Tip 🗣: as ka use karke tum imported item ka apna local name de sakte ho.

Import All as a Namespace (* as)

Use this to group all exports under one name.

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

// app.js
import * as math from "./math.js";
console.log(math.add(5, 5)); // 10
console.log(math.sub(5, 3)); // 2

Default Export

Used when the file exports only one main function or object.

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

// app.js
// app.js
import greet from "./message.js"; // no curly braces!
console.log(greet("Riya"));

Built-in Modules

Built-in modules are part of the JavaScript Standard Library and you can use them without installing any additional packages. Some of them are fs, path etc.

Third-Party Modules

Third-party modules are external libraries that you can install using npm, yarn,pnpm,bun, etc. Some of them are express, react, react-dom, etc.

← PreviousNext →