Event Loop در JavaScript چیست؟ آموزش کامل Call Stack، Web APIs، Callback Queue و Microtask Queue

اگر تا به حال از setTimeout، Promise، fetch یا async/await استفاده کرده باشید، در واقع با Event Loop سروکار داشته‌اید؛ حتی اگر از وجود آن خبر نداشته باشید. Event Loop یکی از مهم‌ترین بخش‌های موتور JavaScript است که وظیفه مدیریت اجرای کدهای همزمان (Synchronous) و غیرهمزمان (Asynchronous) را بر عهده دارد. بدون وجود Event Loop، JavaScript نمی‌توانست درخواست‌های شبکه، انیمیشن‌ها، تایمرها یا عملیات فایل را بدون توقف اجرای برنامه مدیریت کند. در این مقاله یاد می‌گیرید JavaScript چگونه کدها را اجرا می‌کند، Call Stack چیست، Web APIs چه کاری انجام می‌دهند، Callback Queue چیست، Promise Queue یا Microtask Queue چگونه کار می‌کند، چرا Promise قبل از setTimeout اجرا می‌شود، چرا setTimeout همیشه دقیق نیست و Event Loop مرحله به مرحله چگونه تصمیم می‌گیرد کدام کد اجرا شود. اگر قصد شرکت در مصاحبه‌های Front-End یا یادگیری عمیق JavaScript را دارید، درک Event Loop یکی از مهم‌ترین مباحثی است که باید به آن مسلط باشید.

یکی از مفاهیم پایه برای درک Event Loop، مفهوم Single Thread بودن JavaScript است. زمانی که می‌گوییم JavaScript یک زبان Single Thread است، یعنی در هر لحظه فقط یک دستور JavaScript می‌تواند اجرا شود و تنها یک Call Stack برای اجرای کدها وجود دارد. برای مثال اگر سه دستور console.log پشت سر هم نوشته شوند، خروجی دقیقاً به همان ترتیب نمایش داده می‌شود. با این حال JavaScript می‌تواند عملیات‌های زمان‌بر مانند درخواست‌های شبکه یا تایمرها را بدون متوقف کردن برنامه مدیریت کند. دلیل این موضوع وجود Web APIs و Event Loop است. زمانی که از fetch یا setTimeout استفاده می‌کنید، JavaScript منتظر پایان عملیات نمی‌ماند، بلکه آن را به محیط اجرا می‌سپارد و اجرای سایر دستورات را ادامه می‌دهد. پس از آماده شدن نتیجه، Event Loop آن را دوباره وارد چرخه اجرا می‌کند. این معماری باعث سادگی مدیریت حافظه، جلوگیری از بسیاری از Race Conditionها و عملکرد مناسب برنامه‌های وب شده است.

Call Stack یکی از اصلی‌ترین بخش‌های موتور JavaScript است که وظیفه مدیریت اجرای توابع را بر عهده دارد. این ساختار بر اساس مدل LIFO یا Last In First Out کار می‌کند؛ یعنی آخرین تابعی که وارد Stack می‌شود، اولین تابعی است که از آن خارج خواهد شد. هر بار که یک تابع فراخوانی می‌شود، یک Execution Context برای آن ایجاد شده و وارد Call Stack می‌شود. پس از پایان اجرای تابع، آن Context از Stack حذف می‌شود. اگر تابعی بدون توقف خودش را فراخوانی کند، Stack به مرور پر شده و در نهایت خطای Maximum Call Stack Size Exceeded رخ می‌دهد که به آن Stack Overflow گفته می‌شود. Event Loop همواره بررسی می‌کند که آیا Call Stack خالی شده است یا خیر و تنها زمانی که Stack خالی باشد، وظایف جدید را از Queueها وارد آن می‌کند.

یکی از مهم‌ترین بخش‌هایی که باعث می‌شود JavaScript بتواند عملیات غیرهمزمان را مدیریت کند، Web APIs هستند. بسیاری از قابلیت‌هایی که روزانه در JavaScript استفاده می‌کنیم، بخشی از خود زبان JavaScript نیستند، بلکه توسط مرورگر یا محیط اجرا مانند Node.js در اختیار JavaScript قرار می‌گیرند. برای مثال، توابعی مانند setTimeout، Fetch API، DOM API، Geolocation API و Local Storage همگی توسط محیط اجرا فراهم شده‌اند. زمانی که JavaScript به دستور setTimeout یا fetch می‌رسد، اجرای آن را به Web API مربوطه واگذار می‌کند و بدون منتظر ماندن برای پایان عملیات، اجرای سایر دستورات را ادامه می‌دهد. پس از اتمام عملیات، نتیجه آماده شده و وارد یکی از صف‌های انتظار می‌شود تا Event Loop در زمان مناسب آن را برای اجرا وارد Call Stack کند. اگر Web APIs وجود نداشتند، JavaScript مجبور بود برای تمام عملیات‌های زمان‌بر منتظر بماند و در نتیجه رابط کاربری مرورگر کاملاً متوقف می‌شد.

بعد از اینکه با Call Stack و Web APIs آشنا شدیم، نوبت به Callback Queue یا Task Queue می‌رسد. Callback Queue محلی است که callbackهای آماده اجرا در آن قرار می‌گیرند تا زمانی که Call Stack خالی شود. عملیات‌هایی مانند setTimeout، setInterval، رویدادهای کلیک کاربر و بسیاری از Eventهای مرورگر پس از آماده شدن، callback خود را وارد این صف می‌کنند. برای مثال اگر setTimeout با زمان صفر تعریف شود، callback آن مستقیماً اجرا نمی‌شود. ابتدا JavaScript اجرای کدهای همزمان را به پایان می‌رساند، سپس Event Loop بررسی می‌کند که آیا Call Stack خالی است یا خیر. اگر Stack خالی باشد، اولین وظیفه موجود در Callback Queue وارد Call Stack شده و اجرا می‌شود. به همین دلیل است که حتی setTimeout با مقدار صفر نیز بعد از پایان اجرای کدهای همزمان اجرا خواهد شد.

یکی از مهم‌ترین مفاهیم Event Loop تفاوت بین Callback Queue و Microtask Queue است. برخلاف تصور بسیاری از برنامه‌نویسان، تمام عملیات‌های asynchronous در یک صف قرار نمی‌گیرند. JavaScript دارای صفی با اولویت بالاتر به نام Microtask Queue است. Promise.then، Promise.catch، Promise.finally، queueMicrotask و MutationObserver همگی callbackهای خود را داخل این صف قرار می‌دهند. Event Loop همیشه قبل از بررسی Callback Queue، ابتدا تمام وظایف موجود در Microtask Queue را اجرا می‌کند. به همین دلیل Promiseها معمولاً زودتر از callbackهای setTimeout اجرا می‌شوند. این رفتار یکی از مهم‌ترین نکاتی است که هر توسعه‌دهنده JavaScript باید آن را به خوبی درک کند، زیرا در بسیاری از پروژه‌های واقعی و همچنین مصاحبه‌های شغلی مورد سؤال قرار می‌گیرد.

در JavaScript عملیات‌های غیرهمزمان از نظر اولویت اجرا به دو دسته اصلی تقسیم می‌شوند: Microtask و Macrotask. Macrotaskها شامل وظایفی مانند setTimeout، setInterval، رویدادهای کاربر و بسیاری از عملیات‌های I/O هستند. در مقابل، Promiseها، queueMicrotask و MutationObserver داخل Microtask Queue قرار می‌گیرند. Event Loop ابتدا تمام کدهای موجود در Call Stack را اجرا می‌کند، سپس تمام وظایف موجود در Microtask Queue را تا خالی شدن کامل آن اجرا می‌کند و در نهایت تنها یک وظیفه از Macrotask Queue را وارد Call Stack می‌کند. این چرخه به صورت مداوم تکرار می‌شود. به همین دلیل اگر همزمان یک Promise و یک setTimeout داشته باشیم، Promise همیشه زودتر اجرا خواهد شد؛ حتی اگر زمان setTimeout برابر صفر باشد.

یکی از معروف‌ترین سؤالات مصاحبه JavaScript همین موضوع است. تصور کنید یک Promise و یک setTimeout با زمان صفر در کنار هم تعریف شده باشند. بسیاری از افراد انتظار دارند callback مربوط به setTimeout زودتر اجرا شود، اما در عمل Promise همیشه اول اجرا می‌شود. دلیل این رفتار این است که callback مربوط به Promise داخل Microtask Queue قرار می‌گیرد، در حالی که callback مربوط به setTimeout وارد Macrotask Queue می‌شود. Event Loop پس از خالی شدن Call Stack ابتدا تمام وظایف موجود در Microtask Queue را اجرا می‌کند و تنها بعد از آن سراغ Macrotask Queue می‌رود. بنابراین Promise قبل از setTimeout اجرا خواهد شد. این رفتار پایه بسیاری از قابلیت‌های مدرن JavaScript مانند async و await است.

یکی از باورهای اشتباه درباره JavaScript این است که بسیاری تصور می‌کنند setTimeout دقیقاً بعد از مدت زمانی که مشخص می‌کنیم اجرا خواهد شد. در واقع setTimeout تنها تضمین می‌کند که callback زودتر از زمان تعیین شده اجرا نشود. زمانی که تایمر به پایان می‌رسد، callback مستقیماً اجرا نمی‌شود، بلکه وارد Callback Queue می‌شود و منتظر می‌ماند تا Call Stack کاملاً خالی شود. اگر در آن لحظه JavaScript مشغول اجرای یک عملیات سنگین، یک حلقه طولانی یا تعداد زیادی Microtask باشد، اجرای callback به تعویق می‌افتد. به همین دلیل setTimeout(1000) به معنی اجرای دقیق بعد از یک ثانیه نیست، بلکه به معنی آماده شدن callback پس از حداقل یک ثانیه است. اجرای واقعی آن کاملاً به وضعیت Event Loop بستگی دارد.

فرض کنید کدی شامل console.log، یک setTimeout و یک Promise داشته باشیم. ابتدا تمام دستورات همزمان داخل Call Stack اجرا می‌شوند. هنگام رسیدن به setTimeout، تایمر توسط Web API مدیریت می‌شود و JavaScript اجرای سایر دستورات را ادامه می‌دهد. سپس Promise ایجاد شده و callback آن وارد Microtask Queue می‌شود. بعد از پایان اجرای کدهای همزمان، Event Loop بررسی می‌کند که آیا Microtask Queue خالی است یا خیر. اگر وظیفه‌ای در آن وجود داشته باشد، ابتدا تمام آن‌ها اجرا می‌شوند. پس از خالی شدن کامل Microtask Queue، اولین وظیفه موجود در Callback Queue وارد Call Stack شده و اجرا می‌شود. این چرخه به صورت مداوم تکرار می‌شود و دلیل اصلی ترتیب اجرای Promiseها و setTimeoutها نیز همین مکانیزم است.

یکی از پرتکرارترین سوالات مصاحبه‌های Front-End مربوط به Event Loop است. معمولاً از داوطلب پرسیده می‌شود Event Loop چیست، چرا JavaScript را Single Thread می‌نامند، تفاوت Callback Queue و Microtask Queue چیست، چرا Promise قبل از setTimeout اجرا می‌شود، آیا setTimeout با مقدار صفر بلافاصله اجرا می‌شود و نقش Web APIs در اجرای عملیات‌های asynchronous چیست. همچنین ممکن است از شما بخواهند خروجی چند قطعه کد شامل Promise، async/await و setTimeout را پیش‌بینی کنید. اگر مفاهیم Call Stack، Event Loop، Microtask Queue و Macrotask Queue را به خوبی درک کرده باشید، پاسخ دادن به این سوالات بسیار ساده خواهد بود.

Event Loop یکی از مهم‌ترین مفاهیم JavaScript است که درک صحیح آن باعث می‌شود بتوانید رفتار برنامه‌های asynchronous را به‌درستی تحلیل کنید. در این مقاله با نحوه اجرای JavaScript، مفهوم Single Thread، Call Stack، Web APIs، Callback Queue، Microtask Queue، تفاوت Microtask و Macrotask، دلیل اجرای Promise قبل از setTimeout و علت دقیق نبودن setTimeout آشنا شدیم. تسلط بر این مفاهیم نه تنها در مصاحبه‌های شغلی اهمیت زیادی دارد، بلکه در توسعه برنامه‌های واقعی نیز به شما کمک می‌کند تا کدهایی قابل پیش‌بینی‌تر، بهینه‌تر و بدون خطاهای رایج asynchronous بنویسید. اگر قصد دارید به یک توسعه‌دهنده حرفه‌ای JavaScript تبدیل شوید، پیشنهاد می‌کنیم پس از یادگیری Event Loop، مفاهیمی مانند Promise، Async/Await، Closure، Prototype، Memory Management و Performance Optimization را نیز به صورت عمیق مطالعه کنید.