javascript-visualized
✨♻️ JavaScript Visualized: Event Loop
ও মোর খোদা ! সেই ইভেন্ট লুপ! এটা সেই জিনিস যেটা সকল জাভাস্ক্রিপ্ট ডেভেলপারকে কোন না কোন সময় কোন না কোন ভাবে কাজ করতেই হয়। কিন্তু শুরুতে এটা বোঝা কিছুটা কনফিউজিং! আমি কিছু বুঝতে হলে ভিজুয়ালি বুঝি। তাই ভাবলাম আপনাদের এটা ভিজুয়ালি বুঝানোর চেষ্টা করব। কিন্তু কি দিয়ে বুঝাব? লো রেজুলেশন gif দিয়ে, কারণ এটা ২০১৯ সাল এবং gif গুলো এখনও pixelated আর ঝাপসা!
কিন্তু প্রথম কথা হল, ইভেন্ট লুপ কি? আর আমরা কেনই বা এটাকে এতো পাত্তা দিব?
জাভাস্ক্রিপ্ট হচ্ছে সিঙ্গেল-থ্রেডেডঃ অর্থাৎ এক সময়ে শুধু একটা কাজ করতে পারে। সাধারণত এটা তেমন কোন বিষয় না, কিন্তু একটা বার কল্পনা করে দেখেন, একটা টাস্ক করতে ৩০ সেকেন্ড সময় লাগে। হ্যাঁ… সেই কাজ চলাকালীন আমরা ৩০ সেকেন্ড ধরে বসে আছি, অপেক্ষা করে আছি, কখন কাজটা শেষ হবে, তারপর আমরা পরের কাজে যাব(বাই ডিফল্ট, জাভাস্ক্রিপ্ট ব্রাউজারের মেইন থ্রেডে রান করে, মানে UI আটকে আছে!)। 😬 এটা ২০১৯ , কেউ চায়না একটা স্লো, unresponsive ওয়েবসাইট।
কপাল ভাল, ব্রাউজার আমাদের কিছু ফিচার দেয়, যেগুলো জাভাক্রিপ্ট ইঞ্জিন আমাদের দেয়নাঃ একটা Web API . এর মধ্যে আছে DOP API, setTimeout, HTTP requests সহ আরও অনেক কিছু। এই জিনিসটা আমাদের কিছু async, non-blocking behavior তৈরি করতে সাহায্য করে। 🚀
যখন আমরা একটা ফাংশন ইনভোক করি, এটা একটা জিনিসের ভিতর ঢুকে যায়, যাকে বলে call stack। এই কল স্ট্যাক ব্রাউজারে জিনিস না, এটা জাভাস্ক্রিপ্ট ইঞ্জিনের জিনিস। এটা একটা স্ট্যাক(stack) , মানে, এটা first in, last out (একটা থালাভর্তি রুটির কথা কল্পনা করেন )। যখন একটা ফাংশন একটা ভ্যালু রিটার্ন করে তখন এটা স্ট্যাক এর উপর থেকে বের হয়ে যায়।
respond ফাংশনটা রিটার্ন করে একটা setTimeout ফাংশন। এই setTimeout আমাদেরকে দিয়েছে Web API: এটা মেইন থ্রেডকে ব্লক না করে আমাদেকে কোন কাজ ডিলে(দেরি/delay) করার সুবিধা দেয়। যেই কলব্যাক ফাংশনটা আমরা setTimeout ফাংশনের ভিতরে পাঠিয়েছি, মানে arrow ফাংশনটা () => { return 'Hey' } Web API এর মধ্যে ঢুকে যায়। এরই মধ্যে setTimeout ফাংশন আর respond ফাংশন স্ট্যাক এর ভেতর থেকে বের হয়ে যায়। তারা দুইজনেই তাদের ভ্যালু রিটার্ন করে দিয়েছে!
Web API এর মধ্যে একটা টাইমার চালু হয়ে যায়। দ্বিতীয় আর্গুমেন্টে আমরা যত সেকেন্ড দিয়েছি(এক্ষেত্রে 1000ms) ততক্ষণ এই টাইমার চলে। কলব্যাকটা সাথে সাথে কিন্তু কল স্ট্যাকে ঢুকে যায় না, বরং এটা কিউ(queue) নামে একটা জিনিসে পাস করে দেয়া হয়।
এই অংশটা একটু কনফিউজিংঃ কলব্যাক 1000ms পার হওয়ার সাথে কলস্ট্যাকে ঢুকে যায় না! আসলে 1000ms পর এটা queue এর ভিতর ঢুকে যায়। কিন্তু এটা কিউ(মানে সারি), অর্থাৎ ফাংশনকে তার সিরিয়াল আসা পর্যন্ত অপেক্ষা করতে হবে!
এইযে, এই সময়টার জন্যই সবাই অপেক্ষা করছিলাম… এখন মঞ্চ ছেড়ে দেয়া হল ইভেন্ট লুপকে! ইভেন্ট লুপকে স্বাগতম! এবার সে তার একমাত্র কাজ করবেঃ কিউ কে কলস্ট্যাকের সাথে কানেক্ট করবে! যদি কলস্ট্যাক খালি থাকে, মানে আগে ইনভোক করা সব ফাংশন যদি তাদের রিটার্ন ভ্যালু দিয়ে দেয় এবং ফাংশনগুলোকে কলস্ট্যাক ফেলে দেয়, তাহলে কিউ এর প্রথম আইটেমটা কলস্ট্যাকে অ্যাড হবে। এক্ষেত্রে অন্য কোন ফাংশন কল হয়নি, এর অর্থ কলস্ট্যাক ফাঁকা ছিল যখন কলব্যাক ফাংশনটা কিউ এর ফার্স্ট আইটেম ছিল।
কলব্যাকটা কলস্ট্যাকে অ্যাড হয়ে যায়, তাকে ইনভোক করা হয়, ভ্যালু রিটার্ন করে তারপর তাকে স্ট্যাক থেকে ছুড়ে ফেলে দেয়া হয়! যাও ভাগো!
আর্টিকেল পড়া মজার, কিন্তু সত্যিকারে কমফোর্টেবল হতে চাইলে আসলে বারবার এটা নিয়ে কাজ করতে হবে। নিজের কোডটা রান করলে কনসোলে কি পাওয়া যাবে বের করার চেষ্টা করেনঃ
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
বুঝলেন? চলেন চট করে দেখে নেই, ব্রাউজারে এই কোড যখন রান করে তখন কি কি হচ্ছেঃ
১। আমরা bar কে ইনভোক করছি। bar একটা setTimeout ফাংশন রিটার্ন করছে।
২। setTimeout এর ভেতর যেই কলব্যাকটা আমরা পাস করছি, সেটা Web API এ অ্যাড হয়ে যাচ্ছে। এবং তারপর setTimeout ফাংশন আর bar কলস্ট্যাক থেকে বের হয়ে যাচ্ছে।
৩। টাইমার চালু হয়ে গেল। এরই মধ্যে foo ইনভোক হয়ে যাচ্ছে এবং First লগ করছে। foo রিটার্ন করছে undefined , baz কল হয়ে যাচ্ছে, এবং কলব্যাকটা কিউতে অ্যাড হয়ে গেল।
৪। baz লগ করছে Third . ইভেন্ট লুপ দেখতে পেল, “আরেহ! baz রিটার্ন করার পর তো কলস্ট্যাক ফাঁকা! এই তো সুযোগ! কলব্যাককে কলস্ট্যাকে পাঠিয়ে দেই!” দিল পাঠিয়ে!
৫। কলব্যাক লগ করলল Second !
আশা করি, ইভেন্ট লুপ নিয়ে আপনি আরেকটু কম্ফোর্টেবল ফিল করছেন। এখনও যদি কনফিউজিং লাগে, চিন্তার কিছু নাই। সবচেয়ে গুরুত্বপূর্ণ বিষয় হল, কিছু বিশেষ error/behavior কেন হচ্ছে সেটা বুঝতে পারা। যাতে গুগলে আমরা ঠিকভাবে সার্চ দিতে পারি আর স্ট্যাক ওভারফ্লোর ঠিক পেজে সমাধান খুজতে পারি! 💪🏼 যেকোন প্রশ্ন থাকলে আপনাকে স্বাদর আমন্ত্রণ রইল!