জাভাস্ক্রিপ্ট মডিউল একটি কোডের কাঠামো, যা কোডের একটি নির্দিষ্ট অংশকে আলাদা করে সংজ্ঞায়িত করে এবং প্রয়োজন অনুসারে অন্যান্য অংশে রি-ইউজ (reuse) করা যায়। মডিউল ব্যবহারের ফলে কোডের সংগঠন, রক্ষণাবেক্ষণ এবং পাঠযোগ্যতা বৃদ্ধি পায়। মডিউল ব্যবহারে কোডের বিভিন্ন অংশ একে অপরের থেকে বিচ্ছিন্ন থাকে, এবং এটি ভিন্ন ভিন্ন ফাইলের মধ্যে কোড ভাগ করার সুবিধা দেয়।
মডিউল কি?
একটি মডিউল হল এমন একটি স্ক্রিপ্ট বা কোডের অংশ যা একটি নির্দিষ্ট কাজ সম্পন্ন করে এবং প্রয়োজন হলে অন্য স্ক্রিপ্ট বা কোডে ব্যবহার করা যায়। ES6 (ECMAScript 2015) থেকে জাভাস্ক্রিপ্টে মডিউল ব্যবহারের সুবিধা দেয়া হয়েছে, যা import এবং export কিওয়ার্ডের মাধ্যমে কাজ করে।
মডিউল তৈরি এবং ব্যবহার
এক্সপোর্ট (Export)
যেকোনো ফাংশন, ভ্যারিয়েবল বা ক্লাস অন্য ফাইল থেকে ব্যবহারযোগ্য করার জন্য export কিওয়ার্ড ব্যবহার করা হয়। দুটি প্রধান পদ্ধতিতে এক্সপোর্ট করা যায়: Named Export এবং Default Export।
Named Export
Named Export এর মাধ্যমে একাধিক উপাদান এক্সপোর্ট করা যায় এবং যখন অন্য ফাইল থেকে আমদানি করা হয়, তখন সেগুলোর নাম দিয়ে একে একে রেফারেন্স করা হয়।
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
এখানে, add এবং subtract দুটি ফাংশন এক্সপোর্ট করা হয়েছে।
Default Export
Default Export এর মাধ্যমে একটি একক উপাদান এক্সপোর্ট করা হয় এবং এটি যেকোনো নাম দিয়ে আমদানি করা যায়।
// greet.js
export default function greet(name) {
console.log(`Hello, ${name}!`);
}
এখানে, greet ফাংশন Default Export করা হয়েছে।
ইনপোর্ট (Import)
এক্সপোর্ট করা মডিউল অন্য স্ক্রিপ্টে import কিওয়ার্ড ব্যবহার করে আমদানি করা হয়।
Named Import
Named Import এর মাধ্যমে একাধিক এক্সপোর্ট করা উপাদান একে একে আমদানি করা হয়।
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // আউটপুট: 8
console.log(subtract(5, 3)); // আউটপুট: 2
এখানে, add এবং subtract ফাংশনগুলি math.js ফাইল থেকে আমদানি করা হয়েছে।
Default Import
Default Import এর মাধ্যমে Default Export করা উপাদান সরাসরি আমদানি করা হয়।
// main.js
import greet from './greet.js';
greet('Alice'); // আউটপুট: Hello, Alice!
এখানে, greet ফাংশন greet.js থেকে Default Import করা হয়েছে।
মিশ্রিত এক্সপোর্ট ও ইনপোর্ট
একই ফাইলে Named এবং Default Export উভয়ই থাকতে পারে, এবং এগুলোকে আলাদাভাবে আমদানি করা যেতে পারে।
// utils.js
export const multiply = (a, b) => a * b;
export default function divide(a, b) {
return a / b;
}
// main.js
import divide, { multiply } from './utils.js';
console.log(multiply(2, 3)); // আউটপুট: 6
console.log(divide(6, 3)); // আউটপুট: 2
এখানে, multiply ফাংশন Named Export হিসেবে এবং divide ফাংশন Default Export হিসেবে আমদানি করা হয়েছে।
মডিউল ফাইলের এক্সটেনশন
জাভাস্ক্রিপ্ট মডিউল সাধারণত .js এক্সটেনশন সহ থাকে, তবে ব্রাউজারে মডিউল ব্যবহারের জন্য type="module" অ্যাট্রিবিউট ব্যবহার করা হয়। Node.js এও মডিউল ব্যবহারের জন্য .mjs এক্সটেনশন অথবা type: "module" কনফিগারেশন ফাইলের মধ্যে উল্লেখ করা হয়।
ব্রাউজারে মডিউল ব্যবহার:
<script type="module">
import { add } from './math.js';
console.log(add(2, 3)); // আউটপুট: 5
</script>
Node.js এ মডিউল ব্যবহার:
Node.js এ মডিউল ব্যবহারের জন্য .mjs এক্সটেনশন ব্যবহার করতে হবে বা package.json এ "type": "module" উল্লেখ করতে হবে।
// math.mjs
export const add = (a, b) => a + b;
// main.mjs
import { add } from './math.mjs';
console.log(add(5, 7)); // আউটপুট: 12
সারাংশ
জাভাস্ক্রিপ্ট মডিউল ব্যবহারের মাধ্যমে কোডকে সুশৃঙ্খল ও পুনরায় ব্যবহারযোগ্য করা সম্ভব। export এবং import কিওয়ার্ডের মাধ্যমে একাধিক ফাইলের মধ্যে কোড ভাগ করা যায়, যা বড় প্রজেক্টগুলির ক্ষেত্রে কোডের রক্ষণাবেক্ষণ সহজ করে। Named Export এবং Default Export-এর মাধ্যমে মডিউলকে নিয়ন্ত্রণ করা যায়, এবং মডিউল ফাইলগুলি ব্রাউজার এবং Node.js-এ ব্যবহৃত হতে পারে।
Read more
