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.
In JavaScript, what does the call stack do during code execution?
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.
When you use setTimeout(fn, 0) in JavaScript, where does the callback function get placed while it waits to run?
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.
What is the main role of the JavaScript Event Loop?
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.
Which JavaScript tasks are placed in the microtask queue?
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.
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?
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.
What is the primary purpose of Web APIs in the JavaScript execution environment?
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.
Why does a setTimeout callback with 0 milliseconds delay not execute immediately after it is set?
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.
Which of these statements about JavaScript execution is true?
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.
According to the restaurant analogy, why can JavaScript handle only one task at a time?
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.
Which of the following is usually found in the callback queue?
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.
When a Promise is resolved, when will its .then() callback run?
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.
In the customer support center analogy, what do the VIP sticky notes represent?
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.
What happens when the call stack becomes empty in the event loop cycle?
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.
In JavaScript, where are DOM event callbacks (like a click handler) placed before execution?
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.
Why does JavaScript have separate queues for microtasks and callback (task) tasks?
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.
If both a Promise.then and a setTimeout are scheduled at the same time, which will run first and why?
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.