Advance JavaScript (DOM, BOM, Web API) / Asynchronous JavaScript

Synchronous vs Asynchronous

✅ What is Synchronous JavaScript?

In synchronous programming, code runs one line at a time, and each line waits for the previous one to finish.

Example: In this example, we have shown the synchronous nature of JavaScript.

console.log("Hi");
console.log("Geek");
console.log("How are you?");
Hi
Geek
How are you?

Key Points

  • Code executes in order, line-by-line.

  • Each task blocks the next one until it finishes.

  • Slow operations (like file read or API call) can freeze the program/UI.

  • That's why JavaScript uses asynchronous techniques (callbacks, promises, async/await) for long tasks.

✅ What is Asynchronous JavaScript?

Asynchronous programming lets tasks run without waiting for each other. A task can start, and while it's still running, the program can continue doing other work. This non-blocking behavior keeps apps fast and responsive.

Example: In this example, we have shown the Asynchronous nature of JavaScript.

console.log("Hi");

setTimeout(() => {
    console.log("Geek");
}, 2000);

console.log("End");
Hi
End
Geek

➡️ Understanding Asynchronous JavaScript with setTimeout

  1. Order of Execution

    • "Hi" is logged first.

    • JavaScript does not wait for setTimeout, so "End" prints next.

    • The setTimeout message prints after the delay.

  2. Why It Doesn’t Block

    • JavaScript is single-threaded but uses Web APIs for async tasks.

    • setTimeout is handed off to the Web API while JS keeps running other code.

  3. Behind the Scenes

    • setTimeout goes to the Web API.

    • After the timer ends, its callback moves to the callback queue.

    • The event loop adds it to the call stack when it's free.

  4. No Blocking

    • The rest of the code runs normally; setTimeout does not pause the program.

❓ How Asynchronous JavaScript Works

JavaScript is single-threaded, but it can still handle tasks without blocking.

This happens because of Call Stack, Web APIs, Callback Queue, and the Event Loop.

1. Call Stack

  • This is where functions run.

  • JavaScript executes code one function at a time.

  • Synchronous code goes here directly.

2. Web APIs (Browser Features)

  • Some functions (like setTimeout, fetch requests, DOM events) don’t run on the call stack.

  • They are handled by the browser’s Web APIs.

  • These APIs work in the background without blocking JavaScript.

3. Callback Queue

  • When a Web API finishes its task (timer ends, data arrives, event triggered),

    it puts the callback function into the callback queue.

4. Event Loop

  • Continuously checks:

    • Is the call stack empty?

    • If yes → moves callbacks from the queue to the stack.

This is why async tasks run after synchronous code.

📌 Summary

JavaScript runs your main code first → async tasks wait in Web APIs →

callbacks move to the queue → event loop sends them back when the stack is free.

That’s how JavaScript remains non-blocking and smooth.