Asynchronous JavaScript

In JavaScript, some operations take time to complete, such as fetching data from an API or waiting for a timer.

Asynchronous JavaScript allows JavaScript to handle these operations without blocking other work.

Let's understand it with simple examples!

1. Synchronous JavaScript

Synchronous code runs one line at a time, in order.

console.log("First");
console.log("Second");
console.log("Third");

Output:

First
Second
Third

Each statement runs before the next one.

2. Asynchronous JavaScript

Asynchronous operations allow JavaScript to continue other work while waiting for an operation to finish.

console.log("First");

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

console.log("Third");

Output:

First
Third
Second

Why?

• "First" prints immediately.
• setTimeout() schedules the callback to run after approximately two seconds.
• "Third" prints without waiting for the timer.
• "Second" prints when the timer finishes and its callback can run.

This is a simple example of asynchronous JavaScript.

3. Where Do We Use Asynchronous JavaScript?

Asynchronous JavaScript is commonly used for:

• Fetching data from APIs.
• Loading products in an e-commerce website.
• Sending login details to a server.
• Uploading files.
• Communicating with databases through a backend.

For example, we can fetch products from an API:

fetch("https://fakestoreapi.com/products")
    .then((response) => response.json())
    .then((products) => {
        console.log(products);
    })
    .catch((error) => {
        console.log("Error:", error);
    });