What the heck is the event loop anyway? | Philip Roberts | JSConf EU - YouTube

Understanding the JavaScript Event Loop

• Core Concepts: The talk demystifies common JavaScript terminology, including "event-loop," "non-blocking," "callback," "asynchronous," "single-threaded," and "concurrency."
• Single-Threaded Nature: JavaScript runs on a single thread, meaning it can only execute one piece of code at a time.
• The Call Stack: JavaScript uses a call stack to track function execution. When a function is called, it is pushed onto the stack; when it returns, it is popped off.
• Blocking: If a function takes too long to execute (e.g., a complex calculation or a synchronous network request), it "blocks" the stack, preventing other code from running and freezing the browser UI.
• Asynchronous Callbacks: To handle long-running tasks without blocking, JavaScript uses asynchronous callbacks. These tasks are offloaded to the browser's Web APIs.
• The Event Loop's Role: The event loop constantly monitors the call stack and the callback queue. If the stack is empty, it takes the first task from the queue and pushes it onto the stack for execution.
• Concurrency Model: JavaScript achieves concurrency by offloading tasks (like timers or network requests) to the browser environment, which then pushes the resulting callbacks into a queue once the tasks are complete.
• Key Takeaway: Understanding the relationship between the call stack, Web APIs, the callback queue, and the event loop is essential for writing efficient, non-blocking JavaScript code.