Synchronous vs Asynchronous JavaScript

Before understanding asynchronous programming in JavaScript, we first need to understand how JavaScript handles tasks.

JavaScript can execute code in two ways:

Synchronous Asynchronous

Let’s understand both using a simple real-life example.

Real-Life Analogy: Teacher Checking Notebooks

Imagine a teacher is checking notebooks roll number wise.

Students are standing in a line:

Roll No. 1 → Roll No. 2 → Roll No. 3 → Roll No. 4

Now suppose Roll No. 2 forgot to bring the notebook.

The teacher now has two choices.

1. Synchronous Behavior (Blocking)

In synchronous behavior, the teacher waits for Roll No. 2 student to bring the notebook.

Until that student submits the notebook, the teacher does not move to Roll No. 3.

This causes delay for everyone.

Example:

Teacher checks:

Roll No. 1 ✓ Waits for Roll No. 2… Roll No. 3 has to wait Roll No. 4 also waits

This is called blocking behavior.

JavaScript synchronous code works exactly like this.

It executes one task at a time, in order.

The next task must wait until the current task finishes.

2. Asynchronous Behavior (Non-Blocking)

In asynchronous behavior, the teacher says:

“Complete your notebook and submit it later. I’ll continue checking others first.”

Now the teacher moves to Roll No. 3 and Roll No. 4 without waiting.

When Roll No. 2 completes the notebook, the teacher checks it later.

This saves time and improves efficiency.

This is called non-blocking behavior.

• JavaScript asynchronous code works like this.

• It does not wait for time-consuming tasks like:

• API calls Database queries File downloads Timers

Synchronous Code:

I hope with the above example you understand what is a synchronous behavior.

In js synchronous code means first complete the current task and then move to the next task. The code is executed line by line .Synchronous code is a blocking code.

console.log("Start");

console.log("Checking Notebook 1");

console.log("Checking Notebook 2");

console.log("End");

Output:

Start
Checking Notebook 1
Checking Notebook 2
End

Asynchronous Code:

In js asynchronous code means if some part of code is taking time dont wait for that part continue to next line without waiting for the previous task to complete. Asynchronous code is non-blocking code.

console.log("Start");

setTimeout(() => {
  console.log("Checking Notebook 2 Later");
}, 2000);

console.log("Checking Notebook 3");

console.log("End");

Output:

Start
Checking Notebook 3
End
Checking Notebook 2 Later

Let’s understand this with some real-world examples.

---

1. Fetching Data from an API

When we request data from a server, it takes time because the request travels through the internet and waits for the server response.

JavaScript does not wait there doing nothing. It continues running other code.

Example:

console.log("Fetching user data...");

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => {
    console.log("User data received:", data);
  });

console.log("Other code keeps running...");

Explanation

First, JavaScript starts fetching data from the API.

Since it takes time, it does not stop the entire program.

It moves to the next line and prints “Other code keeps running...”

When the data arrives later, the callback inside .then() runs.

This is asynchronous behavior.

2. Writing Data to a File

Saving data into a file also takes time, especially if the file is large.

Node.js uses asynchronous file handling so the server does not freeze while writing.

Example:

const fs = require("fs");

console.log("Saving file...");

fs.writeFile("notes.txt", "Hello Karan!", (err) => {
  if (err) {
    console.log("Error writing file");
    return;
  }

  console.log("File saved successfully");
});

console.log("Program continues running...");

Explanation

The file starts saving in the background.

JavaScript does not wait for it to finish.

It immediately runs the next line.

When the file is saved, the callback function runs.

This improves performance.

3. Uploading Images to a Server

When users upload profile pictures or product images, uploading takes time depending on internet speed and file size.

JavaScript handles this asynchronously.

Example:

function uploadImage(callback) {
  console.log("Uploading image...");

  setTimeout(() => {
    console.log("Image uploaded successfully");
    callback();
  }, 3000);
}

uploadImage(() => {
  console.log("Save image URL to database");
});

Explanation

The image upload takes time.

Instead of waiting, JavaScript lets other tasks continue.

Once the upload is complete, the callback runs and stores the image URL.

This is common in social media apps and e-commerce websites.

4. Downloading a File

Downloading files like PDFs, videos, or software takes time.

JavaScript handles it asynchronously so users can continue using the app.

Example:

function downloadFile(callback) {
  console.log("Downloading file...");

  setTimeout(() => {
    console.log("Download complete");
    callback();
  }, 4000);
}

downloadFile(() => {
  console.log("Open the file");
});

Explanation

The download happens in the background.

When it finishes, the callback runs.

This prevents blocking the application.

Difference Between Synchronous and Asynchronous Code

Synchronous Code	Asynchronous Code
Tasks are executed one after another	Time-consuming tasks are handled in the background
The next task waits for the current task to finish	The next task does not wait for the current task to finish
It is blocking in nature	It is non-blocking in nature
Slower when a task takes more time	Faster and more efficient for delayed tasks
Example: Normal function execution	Example: API calls, timers, file handling

---

Conclusion

Synchronous and asynchronous programming are important concepts in JavaScript that help us understand how code gets executed.

In synchronous code, tasks are performed one by one, and the next task must wait until the current task finishes. This is simple to understand but can cause delays when a task takes more time.

In asynchronous code, JavaScript does not wait for time-consuming tasks like API calls, file uploads, timers, or database operations. Instead, it continues executing other code and handles the delayed task later when it is completed.

The teacher notebook example helps us understand this clearly—waiting for one student represents synchronous behavior, while moving to the next student and checking later represents asynchronous behavior.

This makes asynchronous programming more efficient and is the reason why modern JavaScript uses callbacks, promises, and async/await to handle real-world tasks smoothly.