Synchronous and Asynchronous Behavior of JavaScript

Synchronous Behavior of JavaScript

Before understanding asynchronous JavaScript, we first need to understand synchronous behavior.

Synchronous behavior means JavaScript executes code one statement at a time in the order in which it appears.

Let's look at an example:

function getRun() {
    console.log("I am running");
}

console.log("Hi");
console.log("I am doing work");
getRun();
console.log("Bye");

Output:

Hi
I am doing work
I am running
Bye

Here, JavaScript executes each statement one after another.

It does not skip a statement and come back later. It finishes the current work before moving to the next one.

This type of execution is called synchronous execution.

JavaScript is Single-Threaded

You may have heard that JavaScript is a single-threaded language.

But what does that mean?

A single-threaded language can perform only one task at a time.

Consider the following code:

console.log("Program Start"); // 1

let a = 20; // 2
let b = 10; // 3

console.log(a + b); // 4

console.log("Program End"); // 5

JavaScript executes the code in this order:

1 → 2 → 3 → 4 → 5

It completes statement 1 before moving to statement 2.

It completes statement 2 before moving to statement 3.

This happens because JavaScript has only one main thread for executing code.

So when we say JavaScript is single-threaded, we mean that it can execute only one task at a time.

Why Do We Need Asynchronous Behaviour?

Imagine you click a button on a website.

After clicking the button, the browser needs to:

• Fetch data from a server
• Wait for a timer
• Access the user's location
• Read data from local storage

Some of these operations can take time.

Now imagine JavaScript stopped everything and waited until those operations finished.

The webpage would freeze.

Buttons would stop responding.

Animations would stop.

The user experience would become poor.

To avoid this problem, JavaScript uses asynchronous behavior.

What is Asynchronous Behaviour?

Asynchronous behavior allows JavaScript to start a task that may take time and continue executing the remaining code without waiting for that task to finish.

In other words, JavaScript does not block the execution of the rest of the program while waiting for certain operations to complete.

Let's see an example.

console.log("Hi");

setTimeout(function () {
    console.log("Run after 2 seconds");
}, 2000);

console.log("Bye");

Many beginners expect the output to be:

Hi
Run after 2 seconds
Bye

But the actual output is:

Hi
Bye
Run after 2 seconds

Why?

Because JavaScript does not wait for the timer to finish.

Instead, it continues executing the next statement.

So "Bye" gets printed immediately.

After approximately 2 seconds, the callback function executes and prints:

Run after 2 seconds

What If the Delay Is 0?

Let's change the timer value.

console.log("Hi");

setTimeout(function () {
    console.log("Run after 0 seconds");
}, 0);

console.log("Bye");

Output:

Hi
Bye
Run after 0 seconds

Many developers are surprised by this.

Even though the delay is 0 milliseconds, "Bye" is still printed before the callback function.

This shows that JavaScript does not execute the callback immediately.

The callback is executed later.

We will learn exactly how this happens in the next blog.

How Does JavaScript Perform This Asynchronous Work?

Operations such as:

• Timers (setTimeout)
• User interactions
• Network requests
• Location-related operations
• Local storage operations

are not handled directly by the JavaScript engine.

The browser provides special features that help perform these tasks.

When JavaScript encounters such work, it can hand over that responsibility and continue executing the remaining code.

Once that work is completed, JavaScript gets notified and can execute the corresponding callback function.

The complete internal process behind this behavior will be discussed in the next blog.

Summary

• Synchronous execution means code runs one statement after another.
• JavaScript is single-threaded, meaning it executes one task at a time.
• Some operations take time to complete.
• Waiting for such operations would make the webpage unresponsive.
• Asynchronous behavior allows JavaScript to continue running other code while those operations are being handled.
• setTimeout() is a simple example of asynchronous behavior.
• In the next blog, we will learn how JavaScript actually manages asynchronous tasks behind the scenes.