জাভাস্ক্রিপ্টে ক্লোজার
এই প্রবন্ধে জাভাস্ক্রিপ্টে ক্লোজার ব্যাখ্যা করা হয়েছে।
YouTube Video
জাভাস্ক্রিপ্টে ক্লোজার
জাভাস্ক্রিপ্টে, 'ক্লোজার' একটি অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী ধারণা। ক্লোজার বুঝলে আপনি অনেক ক্ষেত্রে উপকারী জ্ঞান অর্জন করতে পারবেন, যেমন ফাংশনের আচরণ ও স্কোপ, এবং জাভাস্ক্রিপ্টের অ্যাসিঙ্ক্রোনাস প্রসেসিং ও ইভেন্ট হ্যান্ডলিং। এখানে আমরা ক্লোজারের মৌলিক সংজ্ঞা থেকে শুরু করে উদাহরণ ও ব্যবহারের ক্ষেত্র পর্যন্ত বিস্তারিতভাবে ব্যাখ্যা করব।
ক্লোজার কী?
ক্লোজার বোঝায় এমন একটি যন্ত্রণা, যার মাধ্যমে একটি ফাংশন তার সৃষ্টির স্কোপের ভেরিয়েবলগুলোতে অ্যাক্সেস করতে পারে, এমনকি সেই স্কোপের বাইরে থেকেও যখন ফাংশনটি ডাকা হয়। ক্লোজার ব্যবহার করে ফাংশনগুলো বাইরের ভেরিয়েবলগুলোকে সদা 'মনে রাখতে' সক্ষম হয়।
ক্লোজার দুটি প্রধান উপাদানে গঠিত।
-
ফাংশন সংজ্ঞা (ফাংশন নিজেই)
-
যে স্কোপে ফাংশনটি সংজ্ঞায়িত (ফাংশনের বাইরে থাকা ভেরিয়েবল ও অন্যান্য ফাংশন)
জাভাস্ক্রিপ্টে ক্লোজার সম্ভব কারণ ফাংশনগুলোর সেই স্কোপের ভেরিয়েবল অ্যাক্সেস করার ক্ষমতা থাকে, যেখানে সেগুলো তৈরি হয়েছে।
মৌলিক উদাহরণ
প্রথমে, চলুন ক্লোজারের একটি মৌলিক উদাহরণ দেখি। নিম্নের কোডে, outerFunction একটি innerFunction নামক ফাংশন ফেরত দেয়। গুরুত্বপূর্ণ বিষয় হলো, innerFunction outerFunction-এর স্কোপে সংজ্ঞায়িত count ভেরিয়েবলটি অ্যাক্সেস করতে পারে।
1function outerFunction() {
2 let count = 0;
3
4 function innerFunction() {
5 count++;
6 console.log(`Current count: ${count}`);
7 }
8
9 return innerFunction;
10}
11
12const counter = outerFunction();
13counter(); // Current count: 1
14counter(); // Current count: 2
15counter(); // Current count: 3
ক্লোজার কীভাবে কাজ করে
উপরের উদাহরণে দেখা যায়, outerFunction সম্পন্ন হওয়ার পরও innerFunction-এ count বজায় থাকে। innerFunction এখনও outerFunction-এর স্কোপ অ্যাক্সেস করতে পারে এবং এভাবে innerFunction-এর মধ্যে count আপডেট হয়। এটাই ক্লোজারের মৌলিক কাজ করার পদ্ধতি।
counter ভেরিয়েবলে innerFunction সংরক্ষিত আছে, এবং outerFunction সম্পন্ন হয়ে গেলেও count-এর অবস্থা টিকে থাকে সেটা আমরা দেখতে পাই। এর কারণ হলো, জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়নের সময়কার স্কোপ সবসময় 'মনে রাখে'।
প্রয়োগ: ক্লোজারকে প্রাইভেট ভেরিয়েবল হিসেবে ব্যবহার
ক্লোজারকে অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিংয়ের মতো 'প্রাইভেট ভেরিয়েবল' হিসেবে ব্যবহার করা যেতে পারে। সাধারণত, জাভাস্ক্রিপ্টে অবজেক্টের প্রপার্টি বাইর থেকেও সরাসরি অ্যাক্সেস করা যায়, তবে ক্লোজার ব্যবহার করলে ফাংশনের স্কোপে থাকা ভেরিয়েবলে বাইর থেকে সরাসরি পরিবর্তন করা আটকানো যায়।
পরবর্তী উদাহরণে, createCounter ফাংশনটি ক্লোজার ব্যবহার করে একটি কাউন্টারের মতো কাজ করে এবং এটি একটি প্রাইভেট ভেরিয়েবল count-সহ একটি কাউন্টার রিটার্ন করে।
1function createCounter() {
2 let count = 0;
3
4 return {
5 increment: function() {
6 count++;
7 console.log(`Count: ${count}`);
8 },
9 decrement: function() {
10 count--;
11 console.log(`Count: ${count}`);
12 },
13 getCount: function() {
14 return count;
15 }
16 };
17}
18
19const myCounter = createCounter();
20myCounter.increment(); // Count: 1
21myCounter.increment(); // Count: 2
22myCounter.decrement(); // Count: 1
23console.log(myCounter.getCount()); // 1
এই উদাহরণে, count হলো createCounter ফাংশনের স্কোপে থাকা একটি ভেরিয়েবল, তাই বাইর থেকে সরাসরি অ্যাক্সেস করা যায় না। তবে এটি increment এবং decrement মেথডের মাধ্যমে পরিবর্তন করা যেতে পারে। এইভাবে ক্লোজার ব্যবহার করে আপনি জাভাস্ক্রিপ্টে প্রাইভেট ভেরিয়েবলের ধারণা প্রয়োগ করতে পারেন।
ক্লোজার এর ব্যবহারিক উদাহরণ
কলব্যাক ফাংশনের সাথে সংমিশ্রণ
ক্লোজার প্রায়ই অ্যাসিঙ্ক্রোনাস প্রসেসিং পরিচালনার জন্য কলব্যাক ফাংশনের সাথে ব্যবহার করা হয়। উদাহরণস্বরূপ, চলুন একটি টাইমার দিয়ে একটি উদাহরণ বিবেচনা করি।
1function startTimer(duration) {
2 let timeLeft = duration;
3
4 function countdown() {
5 console.log(`Time left: ${timeLeft} seconds`);
6 timeLeft--;
7
8 if (timeLeft >= 0) {
9 setTimeout(countdown, 1000);
10 }
11 }
12
13 countdown();
14}
15
16startTimer(5);
17// Time left: 5 seconds
18// Time left: 4 seconds
19// Time left: 3 seconds
20// Time left: 2 seconds
21// Time left: 1 second
22// Time left: 0 seconds
এই উদাহরণে, countdown ফাংশনটি startTimer-এর স্কোপের মধ্যে থাকা timeLeft ভেরিয়েবলটি অ্যাক্সেস করে। এইভাবে, টাইমারের মতো অ্যাসিঙ্ক্রোনাস প্রসেসিংয়ের জন্য ক্লোজার অত্যন্ত দরকারী, কারণ এতে ভেরিয়েবলের অবস্থা সময়ের সাথে সাথে বজায় থাকে।
ইভেন্ট হ্যান্ডলার
ইভেন্ট হ্যান্ডলার সেটআপের সময় ক্লোজার খুবই উপকারী। নিম্নের উদাহরণে, একটি ক্লোজার ব্যবহার করে বোতামটি কতবার ক্লিক হয়েছে তা রেকর্ড করা হয়েছে।
1function setupClickCounter(buttonId) {
2 let clickCount = 0;
3
4 const button = document.getElementById(buttonId);
5 button.addEventListener('click', function() {
6 clickCount++;
7 console.log(`Button clicked ${clickCount} times`);
8 });
9}
10
11setupClickCounter('myButton');এই ক্ষেত্রে, প্রতিবার ক্লিক করার সাথে সাথে clickCount বাড়ে এবং এর মান সংরক্ষিত থাকে। ক্লোজার ব্যবহার করে প্রতিটি বোতামের জন্য স্বতন্ত্র কাউন্টার নির্ধারণ করা যায়।
উপসংহার
ক্লোজার হলো একটি ধারণা, যা জাভাস্ক্রিপ্টের নমনীয়তা ও শক্তিকে প্রতিফলিত করে। ক্লোজার ফাংশনের স্কোপে ঘেরা ভেরিয়েবলগুলো ধরে রাখে এবং বাইরের ফাংশনের মাধ্যমে সেগুলোর ওপর বিভিন্ন অপারেশন করার সুযোগ দেয়। এই পদ্ধতি বুঝে এবং ব্যবহার করে আপনি জাভাস্ক্রিপ্ট কোডিংয়ে আরও উন্নত কৌশল শিখতে পারবেন।
ক্লোজার বিভিন্ন ক্ষেত্রে ব্যবহার হয়, যেমন ইভেন্ট হ্যান্ডলিং, অ্যাসিঙ্ক্রোনাস প্রসেসিং, এমনকি অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিংয়ের ছদ্ম-ইমপ্লিমেন্টেশনে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।