Synchronous vs Asynchronous JavaScript

What does synchronous code means?

Before jumping into understanding asynchronous programming, let's first deepen our understanding of what synchronous programming is?

So let's suppose you have a code snippet like this:

function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = "Yashika";
const greeting = makeGreeting(name);
console.log(greeting);

Here code is running step by step, with the order we wrote, it waits for makeGreeting() function to finish and return value before moving onto next line. This is synchronous programming. Your next line of code will wait until current line finish processing.

Looks normal right? What's the problem in this?

Well, let's see where it creates a problem!

function blockForSeconds(seconds) {
  const start = Date.now();
  while (Date.now() - start < seconds * 1000) {
    // busy loop (blocks everything)
  }
}

console.log("Start");

blockForSeconds(5); // blocks for 5 seconds

console.log("End");

In the above snippet, blockForSeconds() function will block our main thread for 5 seconds, in that duration everything freezes, user cannot even click in the app.

As we know, JS is a single threaded language means everything works on the main thread which can only do one thing at a time, and it is blocked now due to this function.

But suppose user clicks a button which loads something that take time to load, in that duration user want to do other stuffs in the website, how will he do that?

That's where asynchronous programming comes into picture.

What does asynchronous code means?

So how does asynchronous solves our above problem of blocking main thread ( set of instruction)?

As a sol, we do not want to block main thread, instead of blocking the main thread, JavaScript delegates long-running tasks to external systems and continues executing other code. Once the task is completed, the result is queued and processed later.

console.log("Start");

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

console.log("End");
//Start
//End
//Callback executed

When JavaScript sees setTimeout, it doesn’t handle the timer itself.
It hands it off and moves on.
Once the timer finishes, JavaScript comes back to it—but only after it’s done with everything else.

Where do we actually use asynchronous code?

At this point, it might feel like asynchronous code is just about setTimeout, but in real-world applications, we use it in many places.

Let’s look at some common scenarios:

1. Timers (delayed execution)

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

This is useful when we want to:

• delay execution

• retry something after some time

• schedule tasks

---

2. Event handlers (user interactions)

button.addEventListener("click", () => {
  console.log("Button clicked");
});

Here’s the interesting part:

JavaScript doesn’t wait for the user to click the button. It simply registers what should happen when the click occurs, and moves on.

This is a key idea: Async code is often about reacting to events, not waiting for them.

---

3. API calls (real-world usage)

fetch("/api/user")
  .then((res) => res.json())
  .then((data) => console.log(data));

Fetching data from a server can take time (network delay, server processing, etc.)

If this were synchronous, the UI would freeze and user wouldn’t be able to interact with the app.

With asynchronous code:

• the request is sent

• the app continues working

• response is handled when it arrives

---

Important Insight: Async ≠ Parallel

At first, it might feel like asynchronous code is running in parallel.

But that’s not exactly true.

Even though it feels like multiple things are happening at once, JavaScript itself is still single-threaded.

It doesn’t run your code in parallel. Instead, it:

• delegates long tasks

• continues execution

• handles results later

---

What’s happening behind the scenes?

Behind the scenes, JavaScript keeps track of tasks that finish (like timers or API responses).

Once the current work is done, it picks up these completed tasks and executes their associated functions.

That’s why asynchronous code doesn’t block your application, it waits for the right moment to run.

---

Real-world scenario

Imagine clicking a button that fetches user data from a server.

• In a synchronous world → the entire UI freezes until data comes back

• In an asynchronous world → the UI stays responsive while data is being fetched

Asynchronous programming is not about making things faster. It’s about making your application non-blocking and responsive.