Module System in JS

📌 What is a Module?

A module is a self-contained file or block of code that encapsulates logic and functionality. It helps organize large codebases into manageable parts and promotes reusability, maintainability, and namespace isolation.

📜 Why Use Modules?

• 🔁 Code Reusability – Use the same code in different files.

• 🧠 Maintainability – Easier to debug and manage.

• 🧼 Encapsulation – Prevent variable/function name conflicts.

• 📁 Separation of Concerns – Each module handles a specific task.

🕰️ Evolution of Module Systems in JS

Today, ES6 Modules (ESM) are the standard for both browser and server-side JavaScript.

✅ ES6 Modules (Modern JavaScript)

🧱 Basic Concepts:

• export – Makes a variable/function/class available to other files

• import – Brings in variables/functions from another file

✨ How to Use ES Modules

📂 Example Project Structure

project/
│
├── index.html
├── main.js
├── utils
│   ├── math.js
│   └── greet.js

✅ Exporting

👉 Named Export (you can export multiple things)

// utils/math.js
export const PI = 3.14159;

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

👉 Default Export (only one default per file)

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

✅ Importing

👉 Import named exports

// main.js
import { PI, add } from './utils/math.js';

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

👉 Import default export

import greet from './greet.js';

console.log(greet("Codeveda"));  // Hello, Codeveda!

👉 Rename imports

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

console.log(addition(10, 20));  // 30

✅ Combine Default and Named Imports

import greet, { PI, add } from './combined.js';

🛜 Using ES Modules in Browser

✅ Add type="module" to <script>

<!DOCTYPE html>
<html>
<head>
  <title>ES6 Modules</title>
</head>
<body>
  <script type="module" src="./main.js"></script>
</body>
</html>

🛑 Without type="module", import/export won't work in browser!

⚙️ ES Modules in Node.js

✅ Use .mjs extension or set "type": "module" in package.json

{
  "type": "module"
}

Then, in your JS files:

// utils.mjs or utls.js
export function multiply(a, b) {
  return a * b;
}

// app.mjs or app.js
import { multiply } from './utils.mjs';
console.log(multiply(4, 5));  // 20

🔐 Module Scope

Each module has its own scope:

• Variables and functions defined in one module are not visible in other files unless exported.

• This avoids global namespace pollution.