Understanding the JavaScript Event Loop

JavaScript's event loop is fundamental to how asynchronous tasks are handled in a synchronous, single-threaded environment. This summary provides an overview of key concepts related to the event loop.

Call Stack

The call stack manages the execution order of code. It operates as a Last In First Out (LIFO) data structure, handling the sequence of operations.

Global Execution Context

JavaScript code operates within the Global Execution Context, undergoing two phases:

Memory Creation Phase

• Variables and functions are allocated memory and initialized as 'undefined'.
• Hoisting allows access to variables even before initialization, preventing errors.

Code Execution Phase

• Variable values are assigned as per their assignments, and the code is executed.
• Invoking a function creates a new execution context and lexical environment, forming local memory and a parent's lexical environment.
• Once code execution finishes, the global execution context is removed.

JavaScript Web APIs

Web browsers provide APIs like setTimeout(), setInterval(), clearTimeout(), clearInterval(), etc., enabling execution of additional tasks that can't run on the main thread.

Callback Queue (Task Queue/Macro Task Queue)

After the browser completes a timer set by Web APIs, callback functions aren't immediately added to the call stack. Instead, they're placed in the callback queue to maintain the correct execution sequence.

Microtask Queue

Similar to the Callback Queue, the Microtask Queue has higher priority. It holds callback functions from Promises and Mutation Observer, executing before the Callback Queue.

Event Loop

• Monitors the call stack and the callback queue/microtask queue continuously.
• When the call stack is empty and there's a function in the callback queue/microtask queue, the event loop places it in the call stack for execution.
• Manages the execution of asynchronous callbacks effectively.

Source: "Namaste JavaScript" - Credits to Akshay Saini