if যদি IIFE হয়
বড় বড় মন্ত্রী মিনিস্টার দেখবি সমাবেশে এসে দ্রুত তার বক্তৃতা দিয়ে সাথে সাথে চলে যাচ্ছে। ডাইনে বায়ে কোন কিছু খোঁজ নিচ্ছে না। একইভাবে ভার্সিটির ভিসি স্যারকেও দেখবি অনেক কিছু করতে হয়। কখনো মিটিংয়ে এসে দ্রুত ওনার কাজ করে চলে যেতে হয়। একইভাবে কোন কারণে তোর আব্বুকে যদি অফিস টাইমে বাসায় আসতে হয় তাহলে দ্রুত জরুরি কাজটা শেষ করে তারপর চলে যেতে হয়।
জাভাস্ক্রিপ্টেও দ্রুত আলাদাভাবে কাজ করে ফেলার একটা সিস্টেম আছে যেটাকে ছোট করে IIFE বলে। এইটার বড় নাম হচ্ছে - Immediately Invoked Function Expression এই নামের প্রথম অক্ষরগুলো নিয়ে হয় IIFE
IIFE এর কাজ হচ্ছে এমন একটা ফাংশন তৈরি হবে, যেটা ইমিডিয়েটলি সাথে সাথেই এক্সিকিউট হয়ে যাবে। এবং সাথে সাথে কাজ শেষ। আগে পরে কিছু নাই। এবং পরে ওই ফাংশন নিয়ে কিছু করার দরকারও পড়বে না। অর্থাৎ সে আলাদা একটা জগৎ তৈরি করে কাজ শেষ করে ফেলবে।
ভিতর বলে দূরে থাকো
কোন একটা ছোট কোডকে আলাদা করার জন্য, সেইফ এবং ক্লিন রাখার জন্য IIFE খুবই গুরুত্বপূর্ণ। অনেক সময় ভ্যারিয়েবল বা ফাংশনের নাম কনফ্লিক্ট হতে পারে। অর্থাৎ একইনাম একাধিকবার চলে আসতে পারে। সেসব ক্ষেত্রে IIFE ব্যবহার করলে এর ভেতরের কোড বাইরের কোড থেকে আলাদা থাকে। ভিতর আর বাহিরের কোড মারামারি করতে পারবে না।
আরেকটু সিরিয়াসলি বললে-- IIFE এর মাধ্যমে একটি আলাদা scope তৈরি করা যায়। এর ফলে বাইরে থেকে কোনো ভ্যারিয়েবল বা ডেটা ঐ scope-এ অ্যাক্সেস করা যায় না।
আবার কিছু কোড এমন থাকে যা শুধুমাত্র একবারই রান করতে হয়। এই ক্ষেত্রে IIFE খুব কাজে আসে।
দৌড়ের উপরে IIFE
নরমাল একটা ফাংশন লিখলে আমরা function কীওয়ার্ড লিখি তারপর নাম দিয়ে লিখি। এরপর প্যারামিটার দেয়ার জায়গা থাকে, ফাংশনের বডি থাকে। তারপর এই ফাংশনকে কল করার জন্য আমরা ফাংশন এর নাম লিখে তারপর দুইটা ব্রাকেট দিয়ে ফেলি।
function sayHello() {
console.log("Hello!");
}
sayHello(); খেয়াল করবি ফাংশন কল করার জন্য আমরা ফাংশনের নামের পর দুইটা প্রথম ব্রাকেট () দিয়ে ফেলি। বিশেষ করে যখন ফাংশনের মধ্যে কোন প্যারামিটার না থাকে। IIFE লিখতে গেলে ফাংশন এর নাম দেয়ার দরকার নাই। এবং পুরা ফাংশনকে একটা এক্সপ্রেশন এর মধ্যে রাখতে হবে। অনেকটা (function() { ... }) এই স্টাইলে। তারপর সাথে সাথে কল করার জন্য দুইটা প্রথম ব্রাকেট () দিয়ে দিতে হবে। যাতে ফাংশন লেখার সাথে সাথেই এই ফাংশন কল হয়ে যায়। সেজন্যই এইটাকে বলে ইমিডিয়েট ইনভোক হচ্ছে। অথাৎ ফাংশন ইমিডিয়েটলি রান করতেছে।
এই ফাংশন ইমিডিয়েটলি রান হচ্ছে, অর্থাৎ পরে কেউ এইটাকে আলাদাভাবে কল করবে না। তাই এই ফাংশনের কোন নামের দরকার নাই। আর সাথে সাথে এই ফাংশনকে কল করার জন্য এইটাকে একটা ফাংশন এক্সপ্রেস বানিয়ে ফেলছে। সেইজন্য এইটার পুরা নাম হচ্ছে Immediately Invoked Function Expression বা ওরফে IIFE
এইটার একটা উদাহরণ দেখে ফেলি
(function() {
console.log("This is an IIFE!");
})();
Output: This is an IIFE!কেউ ফাংশনকে কল করা লাগে নাই। বরং সাথে সাথে ইন্সট্যান্টলি আউটপুট দিয়ে দিছে।
আর যদি অ্যারো ফাংশন দিয়ে IIFE লিখতে যাস তাহলে এইভাবে লিখে ফেলবি। সেইম স্টাইলে জাস্ট নরমাল ফাংশনের জায়গায় অ্যারো ফাংশন হবে।
(() => {
console.log("Arrow function IIFE !");
})();
Output: Arrow function IIFE !কেন IIFE দরকার?
অনেক সময় এক কাজ একবারই করতে হয় তখন IIFE খুব কাজে লাগে। যেমন, তুই কোন একটা সফটওয়্যার স্টার্ট করবি। যেটাকে বলে initialize করবি। তো এই ইনিশিয়ালাইজ এর কাজ কিন্তু একবারই হবে। অর্থাৎ তুই মোবাইল অন করার সময় যা যা সেট করা দরকার সেগুলা কিন্তু একবারই করতে হবে। এইসব ক্ষেত্রে IFFE খুব দরকার হয়।
(function() {
console.log("Application initializing...");
// Perform some setup
})();
Output: Application initializing...আবার যেমন একটা ফাইল লোড করবো। একই ফাইল বারবার লোড করবো না। সেক্ষেত্রেও IIFE খুব কাজে দিবে। নিচের কোড পুরাপুরি না বুঝলেও IIFE এর প্রয়োজনীয়তা কিন্তু ঠিকই বুঝতে পারবি।
(function() {
const script = document.createElement("script");
script.src = "https://example.com/library.js";
script.onload = function() {
console.log("Library loaded!");
};
document.head.appendChild(script);
})();Dependency injection
বেশিরভাগ সময় IIFE কোন প্যারামিটার নেয় না। এবং আউটসাইড এর সাথে কোন কিছুর সাথে গেস্টাগেষ্টি করে না। তবে মাঝে মধ্যে দরকার হলে গ্লোবাল কোন কিছু বা কোন প্যারামিটার পার করতে হয়। সেই পার করার সিস্টেম নরমাল ফাংশনের মতো হলেও প্রথমে দেখতে একটু অদ্ভুত লাগবে কিন্তু একটু খেয়াল করলে নরমাল লাগবে।
বিষয়টা হচ্ছে, নরমাল ফাংশনে যেখানে প্যারামিটার ডিক্লেয়ার করবি, এইখানেও সেইভাবেই করবি। নরমাল ফাংশনে function কীওয়ার্ড এবং তার নাম লেখার পর ব্রাকেটের ভিতরে প্যারামিটার সেট করে। এইখানেও সেইম হিসাব। তবে এইখানে নাম যেহেতু নাই এবং function কীওয়ার্ড এর পর ব্রাকেটের ভিতরে লিখে ফেলবি।
(function(global) {
})();এইটা তো প্যারামিটার ডিক্লেয়ার করলি।
নরমাল ফাংশনে শুধু প্যারামিটার ডিক্লেয়ার করলে কাজ হয় না। ফাংশন কল করার সময় আর্গুমেন্ট হিসেবে সেটার মান পাঠাতে হয়। এইখানেও সেইম কাজ করতে হবে। ফাংশন কল যেহেতু ডিক্লেয়ার করার সাথে সাথেই হয়। তাই লাস্ট যে দুইটা প্রথম ব্রাকেট আছে সেটার ভিতরে IIFE এর প্যারামিটার দিয়ে দিতে হবে। নিচে আমরা IIFE কে window অবজেক্ট আর্গুমেন্ট হিসেবে পাস করে কল করতেছি। যাতে IIFE এর ভিতরে window কে global নাম দিয়ে ইউজ করতে পারি।
(function(global) {
})(window);একই সিস্টেমে তুই চাইলে একাধিক আর্গুমেন্ট পাস করতে পারবি।
ফাইনাল কথা হচ্ছে IIFE মানে Immediately Invoked Function Expression– মানে যে ফাংশন সাথে সাথে এক্সিকিউট হয়ে যাবে। হয়ে গিয়ে কাজ শেষ।
Practice:
- IIFE কি জিনিস? এইটা কেন ইউজ করা হয়।
- একটা IIFE বানা যেটা নিজে থেকে console এ "I am isolated from outer scope!" প্রিন্ট করবে।
- অ্যারো ফাংশন দিয়ে একটা IIFE বানা, যেটা প্রিন্ট করবে "borrow from arrow"।
- একটা IIFE বানা যেটা temperature প্যারামিটার নেবে এবং কেলভিন থেকে সেলসিয়াসে কনভার্ট করবে। কনভার্ট করার ফর্মুলা হলো: celsius = kelvin - 273.15। তারপর কনভার্ট করা মানটা প্রিন্ট কর।