Synchronous vs Asynchronous JavaScript

Hello readers,

Welcome back to another blog. In the previous post, I explained the call(), apply(), and bind() methods, highlighting how they can change the context of this and their practical applications.

If you haven't read yet, then READ HERE

Now, let me ask you something

• Why does your app not freeze when fetching data from an API?

• How can JavaScript handle timers, clicks, and network requests at the same time if it’s single-threaded?

• And what really happens when we say something is “async”?

If you’ve ever been confused by these, this blog is going to clear things up.

Let's start.

What is Synchronous Code?

Synchronous code means

Do one task at a time, in order

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

Output:

Start
Processing...
End

Everything runs step-by-step — no surprises.

You can think of it as if you are standing in a queue, then

• You order

• You wait

• Only after finishing, the next step happens

You are blocked until the current task completes.

What is Asynchronous Code?

Now comes the interesting part.

Asynchronous code means

Start a task, but don’t wait for it to finish

console.log("Start");

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

console.log("End");

Start
End
Inside Timeout

Even though setTimeout is written earlier, it runs later.

You can think of it as:

At a restaurant:

• You order food

• You don’t stand in the kitchen 😄

• You sit, talk, scroll…

• Food arrives when ready

That’s non-blocking behavior

Why Do We Even Need Async in JavaScript?

To understand the importance of async, imagine this scenario where everything worked synchronously

• You click a button → app freezes

• API call takes 5 seconds → UI stuck for 5 seconds

• Large computation → browser becomes unresponsive

Not a great experience, right?

This is exactly why asynchronous behavior exists

Blocking vs Non-Blocking (The Real Difference)

Blocking (Synchronous)

• Execution stops until the task finishes

• Can freeze your app

while (true) {}
console.log("Never runs");

Non-Blocking (Asynchronous)

• Execution continues

• Task completes in the background

This is what makes modern web apps smooth.

Real-life example that can be used in daily life

1. API Calls

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

console.log("After fetch");

Output:

After fetch
<API data later>

2. Timers

setTimeout(() => console.log("Runs later"), 1000);
console.log("Runs first");

These are asynchronous because:

• They depend on external systems (network, browser timers)

• JS doesn’t want to wait and block everything

Problems with Blocking Code

If JavaScript were only synchronous:

• UI would freeze

• Slow user experience

• Cannot handle multiple tasks

Async solves all of this.

How does async work behind the scenes?

JavaScript is a single-threaded language, so a question definitely arises: how does non-blocking (asynchronous) code work?

Without going too deep, here are the steps:

• JS runs your code in a call stack

• Async tasks go to browser APIs

• Once done → they come back via the event loop

I will cover this part in depth in some other blog. This is just an overview.

That's it for this blog. I hope it helps you understand the difference between synchronous and asynchronous code. But now comes the real question:

“If JavaScript doesn’t wait… how do we get results back?”

That’s where callbacks come in —
And trust me, they introduce a whole new set of problems.

I will cover this in the next blog, till then,

Stay consistent and keep grinding.

Peace ✌️