The Event Loop and Call Stack in Javascript

Absolutely! Let’s go through some examples to understand how the event loop and call stack work together in JavaScript.

Key Concepts

1. Call Stack: Keeps track of functions in execution. It works in a Last In, First Out (LIFO) manner.

2. Event Loop: Manages the execution of asynchronous code, checking if the call stack is empty before moving functions from the callback queue to the stack.

3. Callback Queue: Holds asynchronous functions that are ready to run after their main task completes (e.g., setTimeout, promises).

Example 1: Synchronous Code Execution

function first() {
  console.log("First function");
}

function second() {
  console.log("Second function");
}

function third() {
  console.log("Third function");
}

first();
second();
third();

Explanation:

1. Each function is called one after the other.

2. The call stack pushes each function, executes it, and then pops it off.

3. Output will be:

    First function
    Second function
    Third function
   

Example 2: Asynchronous Code with setTimeout

Let’s introduce a setTimeout to see how asynchronous code behaves with the event loop.

function greet() {
  console.log("Hello");
}

function delay() {
  setTimeout(() => {
    console.log("Delayed message");
  }, 1000);
}

function goodbye() {
  console.log("Goodbye");
}

greet();
delay();
goodbye();

Explanation:

1. greet() is called first, so "Hello" is printed immediately.

2. delay() is called, but setTimeout is asynchronous, so it sets a timer and moves the callback to the callback queue to be executed after 1 second.

3. goodbye() is called, so "Goodbye" is printed immediately.

4. After the stack is empty and 1 second has passed, the event loop moves the callback from setTimeout into the call stack, printing "Delayed message."

Output:

Hello
Goodbye
Delayed message

Example 3: Asynchronous Code with Promises

JavaScript treats promises differently—they go into the microtask queue, which has priority over the callback queue.

console.log("Start");

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

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

console.log("End");

Explanation:

1. console.log("Start") is called first, printing "Start".

2. setTimeout is called with a 0ms delay, so its callback is scheduled in the callback queue.

3. Promise.resolve().then(...) schedules its callback in the microtask queue.

4. console.log("End") is called, printing "End".

5. The call stack is now empty, so the event loop checks the microtask queue first, finding the promise callback and printing "Promise resolved".

6. Finally, the callback queue is processed, and "Timeout" is printed.

Output:

Start
End
Promise resolved
Timeout

Summary

• Synchronous functions go directly into the call stack.

• Asynchronous functions (e.g., setTimeout, fetch, Promise) are handled by the event loop and wait in the callback or microtask queue.

• Microtasks (promises) have priority over macrotasks (e.g., setTimeout), so promise resolutions happen before setTimeout callbacks, even with a 0ms delay.