JavaScript Modules Kya Hote Hain?

Modules ki Zaroorat Kyun Hai?

Jaise-jaise web applications bade aur complex hote jaate hain, saara code ek hi file me likhna bohot mushkil ho jaata hai. Isse code messy ho jaata hai, maintain karna kathin hota hai, aur variables ke naam aapas me takra sakte hain (naming conflicts).

JavaScript Modules is problem ka solution hain. Modules humein apne code ko chhote-chhote, logical, aur reusable files me todne ki suvidha dete hain. Har file ek module hoti hai jo apne variables, functions, aur classes ko private rakhti hai. Jo functionality humein doosre files me use karni hoti hai, use hum export karte hain, aur jahan use karna hota hai, wahan import karte hain.

Exporting: Code ko Share Karna

`export` keyword ka use karke aap ek module se functions, objects, ya primitive values ko doosre modules ke liye available bana sakte hain. Do tarah ke exports hote hain:

1. Named Export

Named export ka use tab hota hai jab aapko ek file se multiple cheezein export karni ho. Import karte waqt, aapko inka exact naam use karna padta hai.

// 📁 utils.js

export const PI = 3.14159;

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

2. Default Export

Har module me sirf ek default export ho sakta hai. Yeh uss module ki main functionality ko represent karta hai. Import karte waqt aap ise koi bhi naam de sakte hain.

// 📁 greet.js

function greetUser(name) {
  return `Hello, ${name}!`;
}

export default greetUser;

Importing: Code ko Use Karna

`import` statement ka use doosre modules se export ki gayi functionality ko apne module me laane ke liye hota hai.

Named Import

Named exports ko import karne ke liye curly braces `` ka use hota hai.

// 📁 main.js

import { PI, sum } from './utils.js';

console.log(PI); // 3.14159
console.log(sum(5, 10)); // 15

Aap `as` keyword ka use karke import ka naam badal bhi sakte hain: import { sum as add } from './utils.js';

Default Import

Default export ko import karte waqt curly braces ki zaroorat nahi hoti aur aap ise koi bhi naam de sakte hain.

// 📁 main.js

import myGreetingFunction from './greet.js';

console.log(myGreetingFunction("Amit")); // Hello, Amit!

Combining Imports

Aap ek hi line me default aur named imports dono kar sakte hain.

import myGreetingFunction, { PI, sum } from './module.js';

How to Use Modules in the Browser

Browser ko batane ke liye ki aap modules use kar rahe hain, aapko apne <script> tag me type="module" attribute add karna padta hai.

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

Key Takeaways

• Modules code ko organized aur reusable banate hain.
• `export` se aap ek file se functionality share karte hain.
• `import` se aap uss functionality ko doosri file me use karte hain.
• Named exports multiple values ke liye hote hain aur curly braces `` me import kiye jaate hain.
• Default export har file me ek hi ho sakta hai aur bina curly braces ke import hota hai.
• Browser me modules use karne ke liye <script type="module"> zaroori hai.