Synchronous vs Asynchronous JavaScript

This single blog would help you appreciate the beauty of JS. You would be amazed what JS is capable of.

What is Synchronous

Before diving into technical definitions, let us understand what synchronous mean in layman terms:

Synchronous means happening, existing, or operating at precisely the same time or speed. It refers to simultaneous actions

console.log("Start");
console.log("Middle");
console.log("End");

Start
Middle
End

In the above code block from the output you can guess that the code is executing line by line and this is what's called synchronous behaviour. Each line waits for the finish line to finish first.

You can better understand with an example of cats going to a parking lot in a single lane road, each car stops at the entry gets a ticket and goes inside, the car after it has to wait for this process to over, it cannot simply overtake.

What is Asynchronous

If you google the literal definition of asynchronous, you would get:

Asynchronous refers to events, processes, or communications that do not occur at the same time, are out of sync, or do not depend on the immediate completion of one another.

console.log("Start");

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

console.log("End");

Start
End
Delayed

If you look at the above code block and it's output you see that they are not in sync, if this was a synchronous operation, it would have waited for the delay to be complete and then only move to the console printing end, but it does not do that way.

Such behaviour is what we call asynchronous.

You can better understand it with the example as when you go to a restaurant, you order you food, and while the food is getting prepared, you jump to a conversation with your friend, you don't wait for the food to be prepared and served to start a conversation with your friend.

Why JS needs asynchronous behaviour

You might think that asynchronous behavior is unpredictable, so why not just use synchronous code and keep things simple?

The problem is that JavaScript runs on a single thread. If everything were synchronous, even one slow task could block the entire application, bringing everything to a halt.

To relate this to a real-world JavaScript scenario:

Consider that your app makes an API call to fetch some data, which will be displayed once the request is complete. Would you want your entire app to freeze until the download finishes, or would you prefer the user to continue navigating the app and be notified when the data is ready?

This is where you begin to appreciate asynchronous behaviour. Without it, your app would remain frozen until the API call completes, resulting in a poor user experience.

console.log("Start");

fetch("https://api.example.com/data")
  .then(() => console.log("Data received"));

console.log("End");

Start
End
Data received

In the above code block when an api call is made the app doesn’t wait for the data. It continues running and handles the result later.

Real-world tasks that take time:

• 🌐 API calls (fetching data)

• ⏱️ Timers (setTimeout)

• 📁 File operations

• 🧮 Heavy computations

Problems that occur with blocking code

console.log("Start");

// Imagine this takes 5 seconds
while(true) {}

console.log("End");

Real Problem:

• UI becomes unresponsive

• User clicks → nothing happens

• Bad experience

Blocking	Non-Blocking
wait until the task is complete	moves ahead, handles result later

How Async actions are handled (BASIC)

console.log("1");

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

console.log("3");

Execution Flow:

1 → goes to console
2 → sent to browser timer
3 → executes immediately
2 → comes back later

1
3
2

Conclusion

This blog describes what synchronous and asynchronous means in terms of JS, in the upcoming blogs we would be deep diving into how JS is able to handle this when it runs on a single thread.