ES6+ Features
ES6 Modules
import, export
💡 Modules alag toolboxes hain — apna poora code ek hi bade file mein rakhne ke bajaye, related cheezein alag files mein organize karte ho, aur zaroorat padne par import kar lete ho, jaise zaroorat ka tool nikaal kar use karna.
export kisi function/variable/class ko FILE ke bahar available banata hai. import doosri file se use use karta hai. "Named exports" (multiple cheezein) aur "default export" (ek main cheez per file) — dono patterns common hain.
// mathUtils.js:
export function add(a, b) {
return a + b;
}
export const PI = 3.14159;
export default function multiply(a, b) { // default export — ek per file
return a * b;
}
// main.js:
import multiply, { add, PI } from "./mathUtils.js";
// default import (koi naam bhi de sakte ho) + named imports ({} ke saath)
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6
console.log(PI); // 3.14159📚
Modules alag toolboxes hain — apna poora code ek hi bade file mein rakhne ke bajaye, related cheezein alag files mein organize karte ho, aur zaroorat padne par import kar lete ho, jaise zaroorat ka tool nikaal kar use karna.
1 / 2
⚡ Quick Recap
- export = file ke bahar available banao, import = doosri file se use karo
- Named export ({}) = multiple per file, Default export = ek per file
- Browser mein use karne ke liye <script type="module"> zaroori hai
On this page (2 subtopics)
as keyword se import/export karte waqt naam badal sakte ho — naming conflicts avoid karne ke liye, ya zyada meaningful naam dene ke liye.
// utils.js:
export function calculate(a, b) { return a + b; }
// main.js:
import { calculate as add } from "./utils.js";
console.log(add(2, 3)); // 5 — naye naam se use ho raha haiTip: as especially useful hai jab do modules mein same-named export ho aur dono ek saath import karne hon — naming clash avoid ho jaata hai.
Ek "index.js" file jo multiple modules se cheezein re-export karti hai ("barrel file") — imports ko simplify karta hai, ek hi jagah se sab kuch import ho sakta hai.
// utils/index.js (barrel file):
export { add, subtract } from "./math.js";
export { formatDate } from "./date.js";
// main.js — ek hi import se sab kuch:
import { add, subtract, formatDate } from "./utils/index.js";Tip: Barrel files bade projects mein bahut common hain — imports ko clean rakhte hain, lekin bahut zyada use karne se bundle size/performance par thoda effect bhi ho sakta hai (tree-shaking complexity).