JavaScript Event Loop Essentials Quiz — Questions & Answers

Explore the basics of the JavaScript Event Loop, including the call stack, microtask and callback queues, and how asynchronous code is handled. Perfect for learners seeking a clearer understanding of JavaScript concurrency and async behavior.

This quiz contains 16 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Call Stack Basics

   In JavaScript, what does the call stack do during code execution?

   • It stores all variables used in your program.
   • It executes one function at a time, following a last-in, first-out order.
   • It manages only asynchronous code execution.
   • It directly processes requests for web APIs.
   Show correct answer

   Correct answer: It executes one function at a time, following a last-in, first-out order.

   Explanation: The call stack is responsible for executing JavaScript functions one by one in a last-in, first-out way. It doesn't store program variables, which are managed separately in the execution context. It also does not specifically manage asynchronous code; that is coordinated using queues. The call stack doesn't interact directly with web APIs like timers or network requests.

2. Question 2: setTimeout and Queues

   When you use setTimeout(fn, 0) in JavaScript, where does the callback function get placed while it waits to run?

   • Microtask queue
   • Call stack
   • Callback queue (task queue)
   • Memory heap
   Show correct answer

   Correct answer: Callback queue (task queue)

   Explanation: setTimeout callbacks are placed in the callback queue, also known as the task queue, when their timer finishes. They do not go into the microtask queue, which is reserved for Promises and similar constructs. The call stack is only for immediate code execution, and memory heap is used for storing objects and variables, not callbacks.

3. Question 3: Role of the Event Loop

   What is the main role of the JavaScript Event Loop?

   • It blocks all execution until timers finish.
   • It checks if the call stack is empty, then processes queued tasks.
   • It directly runs setTimeout callbacks only.
   • It stores user inputs like clicks and keypresses.
   Show correct answer

   Correct answer: It checks if the call stack is empty, then processes queued tasks.

   Explanation: The event loop continuously checks if the call stack is empty and then moves tasks from the queues (like microtasks and callbacks) into the stack for execution. It doesn't block other execution for timers or run setTimeouts directly. User inputs are separate and not directly managed by the event loop.

4. Question 4: Microtask vs Callback Queue

   Which JavaScript tasks are placed in the microtask queue?

   • setTimeout and setInterval callbacks
   • Promise.then and Promise.catch handlers
   • console.log statements
   • Synchronous function declarations
   Show correct answer

   Correct answer: Promise.then and Promise.catch handlers

   Explanation: Promise.then and Promise.catch handlers are placed in the microtask queue, which is processed after the call stack becomes empty. setTimeout and setInterval callbacks go to the callback queue. console.log and function declarations are handled synchronously by the call stack.

5. Question 5: Order of Execution Example

   Given this code: console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); console.log('D'); What is the order of console output?

   • A D B C
   • A B C D
   • A D C B
   • A C D B
   Show correct answer

   Correct answer: A D C B

   Explanation: The synchronous console.log('A') and console.log('D') run first. Promise.resolve().then places its callback in the microtask queue, which is executed after synchronous code. setTimeout's callback is placed in the callback queue, executed after microtasks. The other answer options don't follow the correct microtask and callback order.

6. Question 6: Web APIs Function

   What is the primary purpose of Web APIs in the JavaScript execution environment?

   • To execute synchronous JavaScript code quickly
   • To provide helpers that handle operations like timers and fetch requests in the background
   • To add functions directly to the microtask queue
   • To store all user data and application state
   Show correct answer

   Correct answer: To provide helpers that handle operations like timers and fetch requests in the background

   Explanation: Web APIs handle asynchronous operations such as timers, AJAX/fetch calls, and DOM events outside of the JavaScript call stack. They do not execute synchronous code themselves nor do they write directly into the microtask queue. Web APIs also do not manage application data storage.

7. Question 7: setTimeout Timing

   Why does a setTimeout callback with 0 milliseconds delay not execute immediately after it is set?

   • JavaScript does not support zero-delay timers.
   • It waits until both microtasks and the call stack are clear before running.
   • It executes before any synchronous code.
   • It is blocked by the browser until user interaction occurs.
   Show correct answer

   Correct answer: It waits until both microtasks and the call stack are clear before running.

   Explanation: A setTimeout callback, even with 0ms delay, is queued in the callback queue and will only execute after all synchronous code and all microtasks are processed. JavaScript does support zero-delay timers, but they’re non-blocking and executed after microtasks. It is also not blocked by user interaction or executed before synchronous code.

8. Question 8: Synchronous vs Asynchronous

   Which of these statements about JavaScript execution is true?

   • Synchronous code is handled after all queued tasks are executed.
   • Asynchronous tasks like Promises are always handled before setTimeout callbacks.
   • setTimeout callbacks are executed before Promise microtasks.
   • Asynchronous code always blocks the call stack.
   Show correct answer

   Correct answer: Asynchronous tasks like Promises are always handled before setTimeout callbacks.

   Explanation: Promise microtasks are prioritized and executed before any timer callbacks from setTimeout. Synchronous code runs first before any tasks in the queues. setTimeout callbacks are handled after all microtasks, so that distractor is incorrect, and asynchronous tasks do not block the call stack.

9. Question 9: Only One Chef Analogy

   According to the restaurant analogy, why can JavaScript handle only one task at a time?

   • It only works with one web browser at once.
   • It is a single-threaded language by default.
   • It can execute multiple functions simultaneously.
   • It stores all code in a single memory heap.
   Show correct answer

   Correct answer: It is a single-threaded language by default.

   Explanation: JavaScript runs on a single-thread, meaning only one task (like the chef) is processed at any given moment. The analogy doesn’t relate to browsers or memory heaps, and JavaScript cannot execute multiple functions at the same exact time without extra features like web workers.

10. Question 10: Callback Queue Contents

    Which of the following is usually found in the callback queue?

    • Results of Promise.then handlers
    • setTimeout and setInterval callbacks
    • Synchronous for loop iterations
    • Immediate return values of functions
    Show correct answer

    Correct answer: setTimeout and setInterval callbacks

    Explanation: The callback queue handles tasks from setTimeout and setInterval, processed after the call stack and microtasks. Promise handlers are placed in the microtask queue, not the callback queue. Synchronous code and function return values are handled directly in the call stack.

11. Question 11: Promise Priority

    When a Promise is resolved, when will its .then() callback run?

    • Immediately, before any remaining synchronous code
    • After the current synchronous code, but before any setTimeout callbacks
    • Only after all callback queue tasks run
    • At the same time as the setTimeout callback
    Show correct answer

    Correct answer: After the current synchronous code, but before any setTimeout callbacks

    Explanation: A Promise’s .then() callback is a microtask, so it runs after all synchronous code finishes but before any callback queue (e.g., setTimeout) tasks. It never interrupts ongoing synchronous code or waits until the callback queue is clear. It does not run concurrently with setTimeout.

12. Question 12: Analogy for Microtasks

    In the customer support center analogy, what do the VIP sticky notes represent?

    • Emails from customers
    • Timer-based callbacks
    • Microtasks like Promise.then
    • Calls from the manager
    Show correct answer

    Correct answer: Microtasks like Promise.then

    Explanation: The VIP sticky notes in the analogy stand for microtasks such as Promise.then, which are addressed as soon as the current task is complete. Emails correspond to callback queue tasks, not microtasks. Calls from managers or other analogies are not specifically related to the microtask queue.

13. Question 13: Event Loop Cycle

    What happens when the call stack becomes empty in the event loop cycle?

    • The event loop stops running entirely.
    • Microtasks in the microtask queue execute first, followed by callback queue tasks.
    • Only callback queue tasks are processed; microtasks are ignored.
    • New synchronous code is immediately executed.
    Show correct answer

    Correct answer: Microtasks in the microtask queue execute first, followed by callback queue tasks.

    Explanation: When the call stack is empty, all microtasks from the microtask queue are executed before any tasks in the callback queue. The event loop does not stop or ignore microtasks. New synchronous code is only executed if triggered from these tasks, not automatically.

14. Question 14: DOM Events and Queues

    In JavaScript, where are DOM event callbacks (like a click handler) placed before execution?

    • Callback queue (task queue)
    • Microtask queue
    • Directly in the call stack
    • Web API storage
    Show correct answer

    Correct answer: Callback queue (task queue)

    Explanation: DOM event callbacks are placed in the callback queue when the event occurs, waiting for the call stack to be free. They are not part of the microtask queue nor are they put directly into the call stack. Web API storage is not a term used for queuing such callbacks.

15. Question 15: Multiple Queues

    Why does JavaScript have separate queues for microtasks and callback (task) tasks?

    • To run all callbacks in random order
    • To prioritize and correctly schedule different tasks based on their importance
    • To slow down execution for debugging
    • To prevent synchronous code from running
    Show correct answer

    Correct answer: To prioritize and correctly schedule different tasks based on their importance

    Explanation: JavaScript separates queues to ensure microtasks (like Promises) are executed before less urgent tasks (like timer callbacks), maintaining proper scheduling. Random execution or slowing down for debugging are not why the separation exists, and synchronous code still runs independently of these queues.

16. Question 16: Order of Promises and Timers

    If both a Promise.then and a setTimeout are scheduled at the same time, which will run first and why?

    • setTimeout, because timers have higher priority
    • Promise.then, because microtasks are always processed before callback queue tasks
    • They will always run simultaneously
    • The order is random every time
    Show correct answer

    Correct answer: Promise.then, because microtasks are always processed before callback queue tasks

    Explanation: Promise.then is a microtask and will always execute before any pending setTimeout callbacks, which are processed in the callback queue after microtasks are cleared. Timers don’t have higher priority, tasks don’t run simultaneously, and the order is not random.