JavaScript Event Loop

· 4 likes
JavaScript Event Loop


JavaScript Event Loop: বিস্তারিত ব্যাখ্যা

JavaScript একটি single-threaded ভাষা, অর্থাৎ এটি এক সময়ে একটি কাজই করতে পারে। তাহলে এটি কীভাবে API থেকে ডেটা আনা, টাইমার পরিচালনা করা, বা ইউজারের ইন্টারঅ্যাকশনের মতো একাধিক কাজ একসাথে করে? এর পেছনে রহস্য হলোEvent Loop

Event Loop-এর প্রধান উপাদানগুলো:

Call Stack:

Call Stack হলো এমন একটি ডেটা স্ট্রাকচার যেখানে ফাংশনগুলো এক্সিকিউট হয়। যখন কোনো ফাংশন কল করা হয়, তখন সেটি স্ট্যাকের উপর যোগ (push) হয়। ফাংশনটির কাজ শেষ হলে সেটি স্ট্যাক থেকে সরানো (pop) হয়। সহজভাবে বললে, Call Stack ফাংশনের কাজগুলো একের পর এক করে। তবে একসাথে একটির বেশি ফাংশন Call Stack-এ থাকতে পারে না, অর্থাৎ এটি synchronous কাজ করে।

Web APIs:

JavaScript ইঞ্জিন কিছু কাজ যেমন setTimeout, fetch বা DOM ইভেন্ট হ্যান্ডলিং-এর জন্য ব্রাউজার বা Node.js-এর বাইরে থাকা Web APIs-এর সাহায্য নেয়। এই কাজগুলো Asynchronous হয়। যখন এগুলো শুরু হয়, তখন এগুলো সরাসরি Call Stack-এ আসে না বরং Web APIs-এর কাছে চলে যায় এবং চলতে থাকে।

Task Queue (Callback Queue):

Asynchronous কাজগুলো (যেমন setTimeout, API calls) শেষ হলে সেগুলো Call Stack-এর সাথে সরাসরি কাজ করে না। বরং Task Queue-তে জমা হয়। যখন Call Stack খালি থাকে, তখন Event Loop সেই Task Queue থেকে কাজগুলো Call Stack-এ পাঠায়। এখানে asynchronous ফাংশনের রেজাল্ট বা callback ফাংশনগুলো জমা হয়।

Event Loop:

Event Loop হলো সেই মেকানিজম, যা Call Stack এবং Task Queue-এর মধ্যে যোগাযোগ করে। Event Loop ক্রমাগত Call Stack-কে পর্যবেক্ষণ করে। যদি Call Stack খালি থাকে, তাহলে এটি Task Queue থেকে কাজগুলো এনে Call Stack-এ প্রসেস করে। এর মাধ্যমে অ্যাসিনক্রোনাস কাজগুলো একে একে সম্পন্ন হয়।

উদাহরণ:

ধরুন, আপনি setTimeout() ফাংশন দিয়ে ২ সেকেন্ড পরে একটি কাজ করতে চেয়েছেন।

1. প্রথমে setTimeout() ফাংশনটি Call Stack-এ যায় এবং সাথে সাথেই Web API-তে চলে যায় যেখানে টাইমার শুরু হয়।

2. এদিকে Call Stack-এ অন্যান্য কাজগুলো চালিয়ে যেতে পারে।

3. ২ সেকেন্ড পর, টাইমার শেষ হলে সেটি Task Queue-তে চলে আসে।

4. Event Loop Call Stack খালি থাকলে Task Queue থেকে সেটিকে নিয়ে এসে প্রসেস করে, অর্থাৎ নির্দিষ্ট সময় পর ফাংশনটি চালায়।

কেন গুরুত্বপূর্ণ:

Event Loop-এর কাজ হলো JavaScript-এর অ্যাসিনক্রোনাস প্রক্রিয়াগুলোকে ম্যানেজ করা, যাতে ইউজার ইন্টারফেস ব্লক না হয় এবং অ্যাপ্লিকেশনটি smoothly চলে। এর মাধ্যমে JavaScript খুব ভালোভাবে non-blocking asynchronous অপারেশন করতে পারে। এটা একাধিক কাজ একসাথে চালানোর ইলিউশন তৈরি করে, যদিও একবারে একটিই কাজ চলছে।

GitHub
LinkedIn