Blog

JavaScript Modules Kya Hote Hain?

JavaScript Modules ek tarika hai jisse hum apne code ko chhote-chhote reusable parts mein divide kar sakte hain. Ye modules alag-alag files mein likhe jaate hain aur export aur import keywords ka use karke ek file se dusri file mein functionalities share ki ja sakti hain. Isse code clean, maintainable aur organized ban jata hai.

For example, agar ek function ya variable multiple jagah use hona hai, to usse ek module mein define karke kahin bhi import kiya ja sakta hai. Modern browsers aur tools jaise Node.js JavaScript modules ko fully support karte hain. Modules mainly do type ke hote hain – ES6 Modules (ECMAScript Modules) aur CommonJS Modules, jisme ES6 Modules sabse commonly used hain.

Kyun Jarurat Padti Hai Modules Ki?

• Agar aap ek bade project pe kaam kar rahe ho, toh agar pura code ek hi file mein likha gaya ho toh:
• Code samajhna mushkil ho jaata hai.
• Har function ya variable globally accessible ho jaata hai (naming conflicts hote hain).
• Reusability kam ho jaati hai.
• Code manage karna difficult ho jaata hai.

Isiliye hum Modules ka use karte hain jisse hum code ko alag-alag files mein tod sakte hain.

JavaScript Modules ke 2 Main Concepts :

1. Export:

JavaScript mein export keyword ka use kisi variable, function, ya class ko ek file se doosri file mein use karne ke liye kiya jaata hai. Jab hum kisi cheez ko export karte hain, to hum usse “shareable” bana dete hain, taaki dusri file usse import karke use kar sake. Do tarah ke exports hote hain: named export aur default export. Named export mein hum multiple cheezein export kar sakte hain, jabki default export mein sirf ek hi value export hoti hai. Export ka use modular coding mein hota hai jisme code ko alag-alag files mein divide kiya jaata hai for better reusability aur maintenance. Ye approach code ko clean, organized, aur manageable banata hai bade JavaScript projects mein.

• Named Export – multiple cheeze export ki ja sakti hain (e.g. export { myFunc, myVar })
• Default Export – ek hi main value export hoti hai (e.g. export default MyComponent)

2. Import:

JavaScript mein import ek keyword hai jo kisi external file se functions, variables, ya classes ko current file mein use karne ke liye hota hai. Jab hum code ko multiple files mein divide karte hain (modular programming), tab import ka use hota hai. Yeh ES6 (ECMAScript 2015) feature hai.

Syntax:

import { functionName } from './filename.js';
import anyName from './filename.js';

Isse code reusable, clean, aur maintainable banta hai. Import automatically file ke exports ko locate karta hai, bina global scope ko pollute kiye. Bas file ka correct path dena zaroori hai. Import sirf module-type JavaScript files mein kaam karta hai.

Export Karne ke 2 Tarike:

1. Named Export:

JavaScript mein Named Export ek aisa method hai jisme hum multiple values ko ek file se export kar sakte hain, jinko import karte waqt unke exact naam ka use karna padta hai. Ye values functions, variables ya classes ho sakti hain. Jab hum named export use karte hain, to curly braces {} ke andar unka naam likhna zaroori hota hai. Iska fayda ye hai ki hum ek hi file se multiple cheezein export kar sakte hain aur import karte waqt clearly specify kar sakte hain ki humein kya chahiye.

// utils.js
export const greet = () => {
  console.log("Hello!");
};

export const sum = (a, b) => a + b;

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

greet(); // Output: Hello!
console.log(sum(3, 4)); // Output: 7

Yahan curly braces {} ka use hota hai kyunki hum named exports ko unke naam se import karte hain.

2. Default Export:

JavaScript mein default export ek aisa feature hai jo kisi file ya module se sirf ek value ko export karne ke liye use hota hai. Jab hum kisi function, object, ya class ko default ke roop mein export karte hain, toh usse import karte waqt exact naam ka use karna zaroori nahi hota. Syntax hota hai: export default value;. Import karte waqt likhte hain: import anyName from ‘./filename’;. Iska fayda ye hai ki ek hi default export hota hai, isliye import karte waqt curly braces ki zarurat nahi padti. Default export code ko modular aur reuseable banane mein madad karta hai. Ye especially useful hota hai jab kisi file mein ek hi primary functionality ho.

// math.js
const multiply = (a, b) => a * b;
export default multiply;

// app.js
import multiplyFunc from './math.js';

console.log(multiplyFunc(3, 5)); // Output: 15

Yahan curly braces ki zarurat nahi hoti.

Import Statements Summary

Example:

// utils.js
export const hello = () => {};
export const bye = () => {};

// index.js
import * as utils from './utils.js';

utils.hello();
utils.bye();

Practical Example:

// message.js
export const welcome = "Welcome to the App!";
export const bye = "Goodbye!";

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

// app.js
import greet from './greet.js';
import { welcome, bye } from './message.js';

console.log(welcome); // Welcome to the App!
console.log(greet("Sandeep")); // Hello, Sandeep!
console.log(bye); // Goodbye!

Important Notes

• Modules sirf browser ya bundler (jaise Webpack, Parcel) mein hi kaam karte hain.
• Aapko file ko type="module" ke saath include karna padta hai:
  <script type="module" src="app.js"></script>
• Modules by default strict mode mein chalte hain.
• File extensions (.js) zarur likhna padta hai import karte waqt.

JavaScript Modules se aap:

• Code ko alag-alag logical parts mein tod sakte ho
• Ek file se doosri file mein function/variable share kar sakte ho
• Reusability aur maintainability badh jaati hai
• Large projects easily manage ho jaate hain

Quiz: Test Your Knowledge on JavaScript Modules (import/export)

Bonus: Practical Application!

Aaj hi apne JavaScript projects mein import/export ka use karke dekhein!

JavaScript Modules ko sahi tareeke se samajhne ke liye in key concepts ka upayog karein:
export vs export default
import ka syntax
 Named vs default exports
 Module scope
 External JS file ka integration

Apne code ko modular aur reusable banane ke liye alag-alag functionalities ko alag files mein likhein aur unhe import/export karke apne main script mein use karein.