درک Call Stack، Callback Queue، Event Loop و Microtask Queue در جاوا اسکریپت

جاوا اسکریپت به دلیل ماهیت تک رشته ای و غیر مسدود کننده اش شناخته شده است که با هماهنگی کارآمد پشته تماس، صف برگشت به تماس، حلقه رویداد و صف میکرووظیفه ممکن می شود. اگر این اصطلاحات گیج کننده به نظر می رسند، نگران نباشید! در این وبلاگ، آنها را با توضیحات و مثال هایی برای مبتدیان تجزیه می کنیم.

1. Call Stack

پشته تماس مانند «لیست کارهایی» است که جاوا اسکریپت از آن برای پیگیری اجرای عملکرد استفاده می کند. ترتیب فراخوانی توابع را مدیریت می کند و اطمینان حاصل می کند که آنها یک به یک به صورت همزمان اجرا می شوند.

چگونه کار می کند:

• هنگامی که یک تابع فراخوانی می شود، به بالای پشته اضافه می شود (یا “هل” می شود.
• پس از اتمام اجرای تابع، از پشته حذف می شود (یا “پاپ” می شود.

مثال

function fun() {
  console.log("Hello!");
}

function check() {
  console.log("Goodbye!");
}

fun();       // ADDED TO THE STACK, EXECUTED, THEN REMOVED 
check();  // ADDED TO THE STACK, EXECUTED, THEN REMOVED

خروجی
Hello!
Goodbye!

در اینجا، هر تابع به ترتیب فراخوانی یک به یک اجرا می شود.

2. صف برگشت به تماس

صف پاسخ به تماس، وظایفی را نگه می دارد (مانند تماس های برگشتی از setTimeout) که باید پس از خالی شدن پشته تماس اجرا شوند. این وظایف ناهمزمان هستند و منتظر می مانند تا پردازش شوند.

چگونه کار می کند:

• هنگامی که یک عملیات ناهمزمان (به عنوان مثال، setTimeout) کامل می شود، پاسخ به تماس آن به صف پاسخ به تماس ارسال می شود.
• حلقه رویداد تضمین می کند که این وظایف فقط زمانی اجرا می شوند که پشته تماس خالی باشد.

مثال:

console.log("Start");

setTimeout(() => {
  console.log("Inside setTimeout");
}, 1000);

console.log("End");

خروجی:
Start
End
Inside setTimeout

این چیزی است که اتفاق می افتد:

“شروع” و “پایان” بلافاصله ثبت می شوند زیرا در پشته تماس هستند.

setTimeout یک تماس برگشتی را پس از 1 ثانیه زمان‌بندی می‌کند و آن را در صف پاسخ به تماس قرار می‌دهد.

پس از خالی شدن پشته تماس، حلقه رویداد، پاسخ تماس را از صف به پشته برای اجرا منتقل می کند.

3. حلقه رویداد

حلقه رویداد قهرمان ناشناخته ای است که اجرای کد جاوا اسکریپت را هماهنگ می کند. این اطمینان حاصل می کند که پشته تماس، صف پاسخ به تماس و صف میکرووظیفه به طور یکپارچه با هم کار می کنند.

چگونه کار می کند:

• حلقه رویداد بررسی می کند که آیا پشته تماس خالی است یا خیر.
• اگر پشته خالی باشد، وظایف را از صف microtask (در صورت وجود) و سپس از صف برگشت پردازش می کند.
• این روند به طور نامحدود ادامه می یابد و اطمینان حاصل می شود که وظایف به ترتیب صحیح اجرا می شوند.

4. صف Microtask

صف microtask مشابه صف برگشت تماس است اما با اولویت بالاتر. وظایفی مانند Promise callbacks و MutationObserver را نگه می‌دارد. Microtasks قبل از انجام هر کار در صف پاسخ به تماس اجرا می شود.

چگونه کار می کند:

پس از خالی شدن پشته تماس، حلقه رویداد تمام ریزوظیفه ها را قبل از رفتن به صف پاسخگویی پردازش می کند.

مثال:

console.log("Start");

setTimeout(() => {
  console.log("Inside setTimeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Inside Promise");
});

console.log("End");

خروجی:
Start
End
Inside Promise
Inside setTimeout

در اینجا دلیل آن است:

• “Start“و”Endابتدا اجرا کنید زیرا همزمان هستند.
• فراخوانی .then() وعده به صف microtask اضافه می شود.
• پاسخ تماس setTimeout به صف پاسخ به تماس اضافه می شود.
• حلقه رویداد، صف ریز وظیفه (Promise) را قبل از صف برگشت (setTimeout) پردازش می کند.

اجازه دهید این را خلاصه کنیم

جاوا اسکریپت عملیات ناهمزمان را با استفاده از call stack، callback queue، event loop، و microtask queue. پشته تماس کدهای همزمان را اجرا می کند، در حالی که حلقه رویداد وظایف ناهمزمان را هماهنگ می کند. Promises (صف وظیفه ریز) نسبت به تماس‌های setTimeout (صف پاسخ به تماس) اولویت دارند و اجرای کارآمد و منظم کد را تضمین می‌کنند.

10 سوال برتر مصاحبه

در اینجا مجموعه ای از 10 سؤال پرطرفدار مصاحبه مربوط به موضوعات پشته تماس، صف برگشت به تماس، حلقه رویداد و صف میکرووظیفه در جاوا اسکریپت آورده شده است.

1. پشته تماس در جاوا اسکریپت چیست و چگونه کار می کند؟
پاسخ:
پشته فراخوانی یک ساختار داده است که اجرای توابع را در جاوا اسکریپت پیگیری می کند. از اصل Last In, First Out (LIFO) پیروی می کند:

• هنگامی که یک تابع فراخوانی می شود، به پشته فشار داده می شود.
• هنگامی که اجرای تابع کامل شد، از پشته خارج می شود.

2. نقش صف برگشت در جاوا اسکریپت چیست؟
پاسخ:
صف پاسخ به تماس، وظایف (بازخوانی) را از عملیات ناهمزمان، مانند setTimeout یا شنوندگان رویداد، نگه می دارد که پس از خالی شدن پشته تماس آماده اجرا هستند.

3. حلقه رویداد چیست و چرا مهم است؟
پاسخ:
حلقه رویداد مکانیزمی است که به طور مداوم خالی بودن پشته تماس را بررسی می کند. اگر اینطور باشد، حلقه رویداد وظایف را از صف پاسخ به تماس یا صف میکرووظیفه به پشته برای اجرا هل می‌دهد. این برنامه جاوا اسکریپت را قادر می سازد تا عملیات غیر مسدود را در یک محیط تک رشته ای انجام دهد.

4. صف میکروتسک چیست و چه تفاوتی با صف برگشت دارد؟
پاسخ:
صف microtask وظایف با اولویت بالا مانند Resolutions Promise و MutationObserver را نگه می‌دارد. این وظایف قبل از هر کاری در صف برگشت اجرا می شوند.

5. setTimeout چگونه در جاوا اسکریپت کار می کند؟
پاسخ:
setTimeout یک تماس برگشتی را برای اجرای پس از یک تاخیر مشخص زمان‌بندی می‌کند. تماس برگشتی به صف پاسخ به تماس اضافه می شود و منتظر می ماند تا حلقه رویداد آن را پس از تاخیر به پشته تماس فشار دهد.

6. چرا Promise .then() خود را قبل از setTimeout اجرا می کند؟
پاسخ:
.then() یک Promise یک ریزکار است که قبل از انجام هر کار در صف برگشت از جمله setTimeout انجام می شود. این اولویت‌بندی تضمین می‌کند که وظایف حیاتی مانند Promises به سرعت انجام می‌شوند.

7. اگر یک ریز وظیفه به طور مداوم در صف ریزکار دیگری قرار گیرد چه اتفاقی می افتد؟
پاسخ:
اگر ریزتسک دیگری را در صف قرار دهد، حلقه‌ای ایجاد می‌کند که در آن حلقه رویداد قبل از انتقال به صف برگشت، به طور نامحدود اجرای ریزتسک‌ها را ادامه می‌دهد. این می تواند باعث تاخیر در اجرای وظایف در صف برگشت تماس شود.

8. تفاوت کد همزمان و ناهمزمان در جاوا اسکریپت چیست؟
پاسخ:
کد سنکرون به صورت متوالی اجرا می شود و کارهای بعدی را تا زمانی که کار فعلی تکمیل شود مسدود می کند.
کد ناهمزمان به سایر وظایف اجازه می دهد تا در زمان انتظار برای عملیاتی مانند I/O یا تایمر اجرا شوند. پس از اتمام عملیات، تماس ها نتیجه را کنترل می کنند.

9. می توانید ترتیب اجرا را در کد زیر توضیح دهید؟

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");

پاسخ:

• “A” و “D” همزمان هستند و ابتدا اجرا می شوند.
• فراخوانی .then() یک ریزتسک است، بنابراین “C” در مرحله بعدی اجرا می شود.
• پاسخ تماس setTimeout در صف پاسخ به تماس است، بنابراین “B” آخرین بار اجرا می شود.

خروجی:
A
D
C
B

10. تفاوت کدهای مسدود کننده و غیر مسدود در جاوا اسکریپت چیست؟
پاسخ:
مسدود کردن کد تا زمانی که کامل نشود از اجرای بیشتر جلوگیری می کند. مثال: یک حلقه while که به طور نامحدود اجرا می شود.
کد غیر مسدود کننده به سایر وظایف اجازه می دهد در حالی که منتظر تکمیل یک کار هستند، اجرا شوند. مثال: عملیات setTimeout یا واکشی.

این پرسش‌ها و پاسخ‌ها به شما کمک می‌کند تا بر مفاهیم اساسی مدل اجرای جاوا اسکریپت تسلط داشته باشید و با اطمینان به مصاحبه‌های فنی بپردازید.