জাভাস্ক্রিপ্ট ক্লোজার (Closure): মনে রাখার খেলা!

“জাভাস্ক্রিপ্ট ফাংশন শুধু কাজ করে না, স্মৃতিও রাখে!”

মনে করুন, আপনি একটা রেস্টুরেন্টে গিয়েছেন।
রেস্টুরেন্টের এক ওয়েটার এসে আপনার নাম আর পছন্দের খাবার জেনে নিয়ে গেল। আপনি অর্ডার করলেন: পাস্তা, একটু এক্সট্রা চিজ দিয়ে।
আপনার খাওয়া শেষ। আপনি চলে গেলেন।

কয়েকদিন পর আপনি আবার গেলেন সেই রেস্টুরেন্টে।
ওয়েটার আপনাকে দেখেই বললো,
“স্যার, আপনি মিস্টার এক্স না? আগেরবার পাস্তা খুব পছন্দ করেছিলেন, মনে আছে?”

আপনি অবাক! এতদিন পরে কিভাবে মনে রাখলো?

প্রোগ্রামিং Closure এর কনসেপ্টটাও এরকম ।

একটা ফাংশন তার বাইরের ভ্যারিয়েবলকে মনে রাখতে পারে, এমনকি সেই বাইরের ফাংশনের কাজ শেষ হয়ে গেলেও ! যেমনটা ওয়েটার আপনার খাবার খাওয়া শেষ হয়ে গেলেও , তার ডিউটি শেষ হয়ে গেলে আপনি কি খেতে পছন্দ করেছিলেন এবং আপনার কি নাম ছিল সেটা মনে রেখে দিয়েছিল । 

এই ব্লগে আমরা শিখবো:

✅ ক্লোজার কী
✅ কিভাবে কাজ করে
✅ কেন দরকার
✅ কোথায় ব্যবহার হয়

ক্লোজার কী?

ক্লোজার হচ্ছে এমন একটা ফাংশন যেটা তার চারপাশের স্কোপ থেকে ভ্যারিয়েবল মনে রাখে । এমনকি সেই স্কোপ আর অ্যাকটিভ না থাকলেও।মানে ফাংশন কে যদি কল ও করে দেয়া হয় এবং সে তার ভিতরে সব কাজ শেষ ও করে ফেলে তবু ক্লোজারের মাধ্যমে কোন ভেলু মনে রাখা যায় । 

আসুন একটা উদাহরণ দেখে নেই । 

function rannaGhor() {
  const recipe = "পাস্তা";

  function waiter() {
    console.log(`স্যার, আপনি আগেরবার ${recipe} খেয়েছিলেন।`);
  }

  return waiter;
}

const amarWaiter = rannaGhor(); 
amarWaiter(); // স্যার, আপনি আগেরবার পাস্তা খেয়েছিলেন।

rannaGhor() ফাংশন চলার পরেই শেষ হয়ে গেছে।
খেয়াল করে দেখুন , আমরা কিন্তু রান্না ঘর নাম ফাংশন করে কল করে ফেলেছি । এবং এই ফাংশন যেই ভেলু রিটার্ন করেছে সেটা একটি ভেরিএবলে স্টোর করেছি । লজিক অনুযায়ী যখন রান্নাঘর ফাংশন যখন কল করা হয়েছে তখনই এর ভিতরে যা যা ছিল এক্সিকিউট হয়ে সব ভেলু ফাকা হয়ে যাবার কথা ।

যেহেতু রান্নাঘর ফাংশন অন্য আরেকটা ফাংশনকে রিটার্ন করেছে সেহেতু আমরা চাইলেই পরের লাইনে amarWaiter() ফাংশনকে কল করতে পারি ।

খেয়াল করে দেখুন , যখনি আপনি আমার ওয়েটার ফাংশনকে কল করেছেন তখন আপনি এরকম আউটপুট পেয়েছেন স্যার, আপনি আগেরবার পাস্তা খেয়েছিলেন।এখানে “পাস্তা” এই শব্দটার দিকে খেয়াল করুন । এই শব্দ কিন্তু এই আমার ওয়েটার ফাংশনের ভিতরের কোন ভেরিএবল না । বা এর নিজিস্ব কোন ভেরিএবল ও না । এটা হচ্ছে তার আগের প্যারেন্ট ফাংশন “rannaGhor()” ফাংশনের

ভেরিএবল ।

কথা হচ্ছে রান্না ঘর ফাংশনকেই কল করে আমরা amarWaiter() ফাংশনকে পেয়েছিলাম । আর আমার ওয়েটার ফাংশনকে কল করলে আমরা সেই “পাস্তা”শব্দটি ও পেয়েছি ।

এইযে জাভাস্ক্রিপ্টের কোন ফাংশন কল হয়ে যাওয়ার পরেও যদি তার ভিতরের রিটার্ন করা কোন ফাংশন কোন ভেলুকে ব্যবহার করে তাহলে ডায়নামিকভাবে প্যারেন্ট ফাংশনের সেই ভেরিবলের মান রিটার্ন করা ফাংশনে মনে রাখে।

এই মনে রাখার কনসেপ্টই ক্লোজার । আর কিছু না ।  

আরেকটি উদাহরণ দেখুন ।

function createTiffin(food) {
  return function() {
    console.log(`আজ টিফিনে আছে: ${food}`);
  };
}

const tiffin1 = createTiffin("স্যান্ডউইচ");
tiffin1(); // আজ টিফিনে আছে: স্যান্ডউইচ

const tiffin2 = createTiffin("পাটিসাপটা");
tiffin2(); // আজ টিফিনে আছে: পাটিসাপটা

 প্রতিটি createTiffin() আলাদা আলাদা মেমোরি তৈরি করে, যেটা food ভ্যারিয়েবল মনে রাখতে পারে।

JavaScript এ যখন আপনি একটি ফাংশন তৈরি করেন, তখন সেটি তার চারপাশের ভ্যারিয়েবল/স্কোপ মনে রাখে, এবং পরে যখনই সেই ফাংশন কল করা হয় সে সেই ভ্যারিয়েবল ব্যবহার করতে পারে, এমনকি যদি বাইরের ফাংশন অনেক আগেই শেষ হয়ে যায়।
একটা উদাহরন দেখুন – 

function outer() {
  let name = "Hasib";
  function inner() {
    console.log(name);
}
  return inner;
}
const greet = outer(); // outer শেষ, কিন্তু...
greet(); // Hasib

এইখানে কি হচ্ছে খেয়াল করুন?

1. outer() ফাংশন কল করলে name = “Hasib” তৈরি হলো।
   
2. এরপর inner() নামের ফাংশন রিটার্ন হলো কিন্তু শুধুমাত্র ফাংশনটাই না, সাথে সাথে name এর reference ও মনে রেখে দিলো।
   
3. তাই outer() ফাংশন এক্সিকিউশন শেষ হয়ে গেলেও greet() যখন চললো, তখনো name এর ভ্যালু এক্সেস করতে পারলো!

ভেতরে ভেতরে যেভাবে কাজ করছেঃ 

ব্রাউজারে বা JavaScript ইঞ্জিনে:

• যখন outer() এক্সিকিউট হয়, তখন একটা Execution Context তৈরি হয়
  
• সেই কনটেক্সটে থাকে name ভ্যারিয়েবল
  
• যখন inner() তৈরি হয়, তখন inner ফাংশনের সাথে সাথে name এর রেফারেন্সও জুড়ে দেওয়া হয়
  
• inner() ফাংশন যতদিন বেঁচে থাকবে, ততদিন name ভ্যারিয়েবল মনে থাকবে

ক্লোজার কোথায় ব্যবহার হয়?

ডেটা প্রাইভেসি (Private Variable):

function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(`Count: ${count}`);
  };
}

const clickCounter = counter();
clickCounter(); // Count: 1
clickCounter(); // Count: 2

🔒 count ভ্যারিয়েবল বাইরে থেকে এক্সেস করা যায় না, কিন্তু clickCounter() তাকে মনে রাখতে পারে!

ফ্যাক্টরি ফাংশন (Function Generator):

function multiplier(x) {
  return function(y) {
    return x * y;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

const triple = multiplier(3);
console.log(triple(5)); // 15

Event Handler এ ক্লোজার:

function setupButton(name) {
  document.getElementById("myBtn").addEventListener("click", function() {
    alert(`Hi ${name}, তুমি ক্লিক করেছো!`);
  });
}

setupButton("Hasib");

তাহলে বলা যায় ,ফাংশন যেটা তার বাইরের ভ্যারিয়েবল মনে রাখতে পারে তাই ক্লোজার । ডেটা প্রাইভেসি, পার্সোনালাইজড ফাংশন, ইউজার ইন্টারঅ্যাকশনে ক্লোজার ব্যবহার হতে পারে । 

যখনই আপনি একটা ফাংশনের ভিতরে আরেকটা ফাংশন দেখবেন, তখনই ভাববেন : এটি কি ক্লোজার তৈরি করছে কিনা ।এটি জাভাস্ক্রিপ্টের এক অন্যতম শক্তিশালী ও গোপনীয় কৌশল। 

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন