ES6 (ECMAScript 2015) এ Modules সিস্টেম পরিচিতি পেয়েছে, যা JavaScript কোডকে ছোট ছোট ফাইল বা মডিউলে ভাগ করে পুনঃব্যবহারযোগ্য এবং ম্যানেজযোগ্য করে তোলে। মডিউল ব্যবস্থার মধ্যে Named Exports এবং Default Exports দুটি ভিন্ন ধরনের এক্সপোর্ট মেকানিজম রয়েছে। এই দুটি এক্সপোর্ট টেকনিক আপনাকে কোডকে আরও সংগঠিত ও পুনঃব্যবহারযোগ্য করার সুযোগ দেয়।
Named Exports
Named Exports এর মাধ্যমে, আপনি একাধিক এক্সপোর্ট করতে পারেন যেগুলোর প্রত্যেকটির নাম থাকে। প্রতিটি এক্সপোর্টের নাম নির্দিষ্ট করে দিলে, আপনি যখন সেই এক্সপোর্ট ব্যবহার করবেন, তখন সেগুলোর নাম ব্যবহার করে ইম্পোর্ট করতে হবে।
Named Exports এর সিনট্যাক্স
// Named Exports
export const x = 10;
export const y = 20;
export function sum(a, b) {
return a + b;
}
এখানে, আমরা x, y এবং sum নামক তিনটি আলাদা এক্সপোর্ট করেছি।
Named Exports ইম্পোর্ট করা
Named Exports ইম্পোর্ট করতে হলে, ইম্পোর্ট করার সময় এক্সপোর্টের নাম অবশ্যই সঠিকভাবে ব্যবহার করতে হবে।
// Named Exports ইম্পোর্ট করা
import { x, y, sum } from './math.js';
console.log(x); // 10
console.log(y); // 20
console.log(sum(2, 3)); // 5
এখানে, x, y এবং sum নামের এক্সপোর্টগুলো {} ব্র্যাকেটের ভিতরে ইম্পোর্ট করা হয়েছে।
Named Exports এর বৈশিষ্ট্য
- আপনি একাধিক এক্সপোর্ট করতে পারেন।
- ইম্পোর্ট করার সময় এক্সপোর্টের নাম অবশ্যই সঠিক হতে হবে।
আপনি এক্সপোর্টের নাম পরিবর্তন করতে চাইলে,
asকীওয়ার্ড ব্যবহার করে নাম পরিবর্তন করতে পারেন।import { sum as add } from './math.js'; console.log(add(2, 3)); // 5
Default Exports
Default Exports এর মাধ্যমে, আপনি একমাত্র একটি এক্সপোর্ট নির্দিষ্ট করতে পারেন যা ডিফল্টভাবে ইম্পোর্ট করা যাবে। Default Exports ব্যবহারের সময় আপনি একক এক্সপোর্টের জন্য একটি নাম বা মান নির্ধারণ করতে পারেন, এবং যখন সেই মডিউলটি ইম্পোর্ট করা হয়, তখন এটি কোনো নাম ছাড়াই ইম্পোর্ট করা সম্ভব।
Default Exports এর সিনট্যাক্স
// Default Export
export default function multiply(a, b) {
return a * b;
}
এখানে, আমরা একটি multiply ফাংশন ডিফল্ট এক্সপোর্ট হিসেবে নির্ধারণ করেছি। এই এক্সপোর্ট শুধুমাত্র একটি এক্সপোর্ট হতে পারে, এবং এটি নাম ছাড়াই ইম্পোর্ট করা যাবে।
Default Exports ইম্পোর্ট করা
Default Exports ইম্পোর্ট করতে হলে, ইম্পোর্টের সময় মডিউলের নাম নির্ধারণ করা যেতে পারে, তবে এটি {} ব্র্যাকেটের মধ্যে লিখতে হবে না।
// Default Export ইম্পোর্ট করা
import multiply from './math.js';
console.log(multiply(2, 3)); // 6
এখানে, multiply ফাংশনটি math.js থেকে ডিফল্ট এক্সপোর্ট হিসেবে ইম্পোর্ট করা হয়েছে।
Default Exports এর বৈশিষ্ট্য
- শুধুমাত্র একটাই ডিফল্ট এক্সপোর্ট হতে পারে।
- ডিফল্ট এক্সপোর্টের জন্য নাম নির্ধারণ করা যায় না, তবে ইম্পোর্টের সময় যে কোনো নাম দেওয়া যায়।
- এটি কোডকে আরও পরিষ্কার এবং সহজ করে তোলে যখন একটাই ভ্যালু বা ফাংশন এক্সপোর্ট করা হয়।
Named এবং Default Exports এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Named Exports | Default Exports |
|---|---|---|
| এক্সপোর্ট | একাধিক এক্সপোর্ট করতে পারবেন | একটিই ডিফল্ট এক্সপোর্ট করা যায় |
| ইম্পোর্ট | {} ব্যবহার করে নির্দিষ্ট নাম দিয়ে ইম্পোর্ট করতে হবে | কোন নাম না দিয়েই ইম্পোর্ট করা যায় |
| নাম পরিবর্তন | নাম পরিবর্তন করা সম্ভব (as) | ইম্পোর্ট করার সময় নাম দেওয়া যেতে পারে |
| উদাহরণ | export const x = 10; | export default function () {} |
উদাহরণ: Named এবং Default Exports একসাথে ব্যবহার
আপনি Named এবং Default Exports একসাথে একটি মডিউলে ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
// math.js
export const PI = 3.14;
export const add = (a, b) => a + b;
export default function multiply(a, b) {
return a * b;
}
এখানে, PI এবং add হল Named Exports, এবং multiply হল Default Export।
ইম্পোর্ট করা
import multiply, { PI, add } from './math.js';
console.log(multiply(2, 3)); // 6
console.log(PI); // 3.14
console.log(add(2, 3)); // 5
এখানে, multiply ডিফল্ট এক্সপোর্ট হিসেবে ইম্পোর্ট করা হয়েছে, আর PI এবং add নামক এক্সপোর্টগুলি Named Exports হিসেবে ইম্পোর্ট করা হয়েছে।
উপসংহার
Named Exports এবং Default Exports ES6 মডিউল ব্যবস্থার দুটি গুরুত্বপূর্ণ অংশ। Named Exports আপনাকে একাধিক এক্সপোর্ট করতে দেয় এবং ইম্পোর্ট করার সময় সঠিক নাম ব্যবহার করতে হয়, whereas Default Exports একক এক্সপোর্টের জন্য ব্যবহৃত হয় এবং ইম্পোর্ট করার সময় কোনো নাম দেওয়া যায়। এই দুটি এক্সপোর্ট টেকনিক কোডকে আরও সংগঠিত ও পুনঃব্যবহারযোগ্য করতে সাহায্য করে।
Read more
