Asynchronous JavaScript

JavaScript is single-threaded, meaning it executes code sequentially. Asynchronous JavaScript allows tasks to run independently of the main thread, enabling non-blocking operations such as fetching data, timers, and event handling.

Core Concepts

• Callbacks: Functions passed as arguments to be executed later.
• Promises: Objects representing eventual completion or failure of async operations.
• Async/Await: Syntax sugar to write asynchronous code that looks synchronous.

1. Callbacks

Callbacks are the oldest way to handle async code. A function is passed as an argument and called when the async task finishes.

function fetchData(callback) {
  setTimeout(() => {
    callback('Data loaded');
  }, 1000);
}

fetchData(message => {
  console.log(message);
});

2. Promises

Promises represent a value that may be available now, later, or never. They have three states: pending, fulfilled, or rejected.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data loaded via Promise');
  }, 1000);
});

fetchData.then(message => console.log(message));

3. Async/Await

Async/await is syntactic sugar over promises, allowing you to write asynchronous code that looks synchronous, improving readability.

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded with async/await');
    }, 1000);
  });
}

async function getData() {
  const message = await fetchData();
  console.log(message);
}

getData();