Asynchronous Programming in JavaScript - Callbacks | Promises | Async/Await

Understanding Asynchronous Programming in JavaScript -

JavaScript handles operations using synchronous and asynchronous approaches. The key to understanding asynchronous behavior is the event loop.

Synchronous and Asynchronous Code

Synchronous Code executes line by line, blocking subsequent lines until the current line finishes.

Example: Synchronous Code

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

Output:
First
Second

---

Asynchronous Code allows some operations to run in the background and complete later, enabling other code to continue executing.

Example: Asynchronous Code with setTimeout()

console.log("First");

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

console.log("Third");

Output:
First
Third
Second

---

Asynchronous Patterns in JavaScript

1. Callbacks

Callbacks are functions passed as arguments to other functions, executed after the first function completes.

Example: Callbacks

console.log("Start");

function asyncTask(callback) {
  setTimeout(() => {
    console.log("Async task completed");
    callback();
  }, 2000);
}

asyncTask(() => {
  console.log("Task finished");
});

console.log("End");

Output:

Start
End
Async task completed
Task finished

2. Promises

Promises represent a value that will be available in the future and can be used to handle asynchronous results.

Example: Promises

console.log("Start");

const asyncTask = new Promise((resolve) => {
  setTimeout(() => {
    console.log("Async task completed");
    resolve();
  }, 2000);
});

asyncTask.then(() => {
  console.log("Task finished");
});

console.log("End");

Output:

Start
End
Async task completed
Task finished

3. Async/Await

Async/await simplifies working with promises by allowing asynchronous code to be written in a more synchronous style.

Example: Async/Await

console.log("Start");

async function asyncTask() {
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log("Async task completed");
      resolve();
    }, 2000);
  });

  console.log("Task finished");
}

asyncTask();

console.log("End");

Output:

Start
End
Async task completed
Task finished

This guide provides a foundation for understanding how JavaScript handles asynchronous operations and the event loop, helping you write efficient, non-blocking code.