Web APIs - How Async JavaScript Works Call Stack & Event Loop

Web APIs are not a feature of JavaScript itself.

They are provided by the browser (like Chrome, Firefox, Safari, etc.).

These APIs help JavaScript perform tasks that are not part of its core capabilities, such as:

1. Timers (setTimeout, setInterval)
2. Fetching data (fetch, AJAX)
3. DOM events (click, scroll, etc.)
4. Geolocation
5. Console operations

Why do we need Web APIs?

JavaScript is a single-threaded language, which means:

1. It can execute only one task at a time

Now imagine this:

1. You make an API call that takes 10 seconds
2. If JavaScript handled it directly, everything would freeze for 10 seconds

That would make your UI unresponsive.

Solution:

To avoid this, asynchronous tasks are handled outside the call stack, using Web APIs.

How Web APIs Work (Step-by-Step Flow)

Let’s simplify the flow:

1. Call Stack

1. Handles all synchronous code
2. Executes functions one by one

2. Web APIs

1. When async operations appear (like setTimeout), they are sent here
2. The browser handles them in the background

3. Callback Queue

1. Once the async task is done, its callback is placed in the queue

4. Event Loop

1. Continuously checks:
2. Is the call stack empty?
3. If yes → moves callback from queue to stack

Example

Output:

Explanation:

1. "Start" → goes to call stack → executes
2. setTimeout → goes to Web API
3. "End" → executes immediately
4. After 2 seconds → callback goes to queue
5. Event loop pushes it to stack → executes

Important Points

1. Call Stack handles synchronous code
2. Web APIs handle asynchronous operations
3. Callback Queue stores completed async callbacks
4. Event Loop manages execution flow
5. This system ensures your app does not freeze

What about Node.js?

Good question.

Even though Node.js does not run in a browser:

1. It uses the V8 engine (same as Chrome)
2. Provides similar async APIs using its own system (like libuv)

So, Web API-like behavior is still available in Node.js.

Interview Questions You Might Get

1. What are Web APIs in JavaScript?
2. Are Web APIs part of JavaScript?
3. What is the role of the Event Loop?
4. Difference between Call Stack and Callback Queue?
5. How does JavaScript handle async operations?