JavaScript Execution Context, Call Stack, Web API’s and Event Loop

JavaScript Execution Context

Execution Context in JavaScript is a whole lot of things. I’ll describe it as my understanding and show you how this works in running script behind the scenes.

There are two phases of Execution Context. Creation phase and execution phase. If you declare a variable in your code var myName = "codespoetry.com", the creation phase will allocate memory for it and create the variable like myName = undefined. It’s undefined because the engine is just allocating memory for it. However, if you use const or let it will create the variable with myName = uninitialized. That’s why var is hoisted and const, let aren’t. That’s a different topic though.

After the creation phase, it’s time to execute. The Call Stack, also called “Execution Stack”, is a part of the Execution Context and executes your script. So, for the above code, it’ll just assign the value “codespoetry.com” to myName. If you use const or let, those will initialize with the value “codespoetry.com”.

When you declare a function in your script, it gets initialized during the creation phase and executes in the execution phase. JavaScript is a single-threaded programming language, meaning it processes tasks synchronously, executing code line by line, top to bottom.

However, not all tasks can be handled synchronously. Sometimes, we need to perform asynchronous operations—like fetching data from a server, executing a function after a delay (e.g., in a clock app), or waiting for user input. Since JavaScript is non-blocking, it cannot pause execution while waiting for a response.

So, how does JavaScript handle asynchronous tasks like fetch(), setTimeout(), or interacting with the Geolocation API?

This is where the browser environment comes in. The browser provides Web APIs that allow JavaScript to perform tasks like:
– Fetching data from a server (fetch())
– Delaying execution (setTimeout() / setInterval())
– Interacting with system features (e.g., Geolocation API, DOM manipulation)

For example, when a script requests user consent for geolocation, the task is offloaded to the browser. The user sees a popup asking for permission, and only after approval does the API return the location (or false if denied). While this is happening, the JavaScript engine continues executing other code without waiting for the response—ensuring smooth, non-blocking execution.

An example of non-blocking operations with Web APIs.

When a function, like setTimeout(), needs to delay execution, JavaScript uses Web APIs to handle the task. Here’s how it works:

• When the call stack encounters a function that requires a delay (e.g., setTimeout() with a 1000ms delay), the function is offloaded to a Web API, and the call stack proceeds to the next task, like console.log("setTimeout executed")
• After 1000ms, the Web API moves the delayed function to the task queue, waiting for execution.

Here, the browser tracks the time of 1000ms and pushes the callback function (to be executed after 1000ms) to the task queue. Web APIs aren’t limited to timers only. For more details, refer to the MDN Web APIs doc.

Handling Promise-based asynchronous operations

JavaScript handles promise-based asynchronous tasks through a microtask queue, unlike other async operations. A system similar to the task queue but with higher priority. When it comes to handling asynchronous operations, such as a Promise resolved, its callback is added to the microtask queue.

Understanding the Event Loop

Now that we’ve covered the call stack, task queue, and microtask queue, let’s explore the event loop.

The event loop continuously monitors both the task queue and the microtask queue. When the call stack is empty, it checks for pending tasks in these queues:

1. If tasks are in the microtask queue, the event loop prioritizes them and pushes them to the call stack for execution.
2. Once all microtasks are processed, the event loop moves tasks from the task queue (if any) to the call stack.

By prioritizing the microtask queue over the task queue, JavaScript ensures a seamless and responsive user experience.

I hope it’s pretty clear how Call Stack, Event Loop and Web API work in Execution Context.