DEV Community

swetha palani
swetha palani

Posted on

Asynchronous JavaScript

JavaScript is single-threaded, which means it can only execute one task at a time. If all tasks run synchronously, long operations like API calls or file reading can block the program and freeze the user interface.

To solve this, JavaScript provides asynchronous programming. Asynchronous code allows tasks to run without blocking the main thread, keeping applications fast and responsive.

What is Asynchronous JavaScript?

Asynchronous JavaScript means code execution does not wait for a task to finish. Instead, JavaScript moves to the next line, and when the asynchronous task is complete, its result is handled separately.

Example: In a restaurant, you place an order and continue talking with friends. The waiter delivers the food when it is ready.

Example of Asynchronous Execution 

console.log("Step 1");

setTimeout(() => {
  console.log("Step 2 (after 2 seconds)");
}, 2000);

console.log("Step 3");
Enter fullscreen mode Exit fullscreen mode

Output:

Step 1
Step 3
Step 2 (after 2 seconds)
Enter fullscreen mode Exit fullscreen mode

Step 3 executes immediately without waiting for Step 2.

Why Asynchronous is Important

  • Prevents blocking of the main program
  • Useful for tasks like API requests, timers, or reading files
  • Keeps applications smooth and responsive

Ways to Write Asynchronous JavaScript

1. Callbacks 

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});
Enter fullscreen mode Exit fullscreen mode

2. Promises 

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 2000);
});

promise.then((result) => console.log(result));
Enter fullscreen mode Exit fullscreen mode

3. Async/Await 

async function getData() {
  let data = await new Promise((resolve) =>
    setTimeout(() => resolve("Data fetched"), 2000)
  );
  console.log(data);
}

getData();
Enter fullscreen mode Exit fullscreen mode

Conclusion

Asynchronous JavaScript helps in handling long-running operations without blocking the main thread. It can be implemented using callbacks, promises, or async/await. Understanding these concepts is essential for building real-world applications that need smooth user experiences.

Top comments (0)