JavaScript Asynchronous Programming

What is asynchronous programming in JavaScript?

Asynchronous programming allows JavaScript to execute tasks concurrently without blocking the main thread. This is essential for handling operations like API requests, timers, and user interactions efficiently, ensuring a smooth user experience.

What are the key features of asynchronous programming?

Non-blocking: Asynchronous operations do not block the execution of subsequent code.
Callbacks: Functions that are executed once a task completes, allowing you to handle results or errors.
Promises: Objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value.
Async/Await: A syntactical sugar over promises that allows you to write asynchronous code in a more synchronous manner.

How do you create a simple asynchronous function using a callback?

You can create an asynchronous function by passing a callback function that gets executed once the operation is complete.


function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000); // Simulates a 1-second delay
}

fetchData((data) => {
  console.log('Data received:', data); // Outputs: Data received: { name: 'Alice' }
});

What is a promise in JavaScript?

A promise is an object that represents the eventual completion or failure of an asynchronous operation. Promises have three states: pending, fulfilled, and rejected.


const myPromise = new Promise((resolve, reject) => {
  const success = true; // Change to false to simulate error
  if (success) {
    resolve('Operation successful!');
  } else {
    reject('Operation failed!');
  }
});

myPromise
  .then(result => console.log(result)) // Outputs: Operation successful!
  .catch(error => console.error(error));

How do you handle multiple promises using `Promise.all()`?

Promise.all() takes an array of promises and returns a single promise that resolves when all promises in the array have resolved or rejects if any promise rejects.


const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, 'foo'));
const promise3 = 42;

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // Outputs: [3, 'foo', 42]
  });

What is the difference between `Promise.race()` and `Promise.all()`?

Promise.race() returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, while Promise.all() waits for all promises to complete.


// Example of Promise.race
const promiseA = new Promise((resolve) => setTimeout(resolve, 2000, 'A'));
const promiseB = new Promise((resolve) => setTimeout(resolve, 1000, 'B'));

Promise.race([promiseA, promiseB])
  .then(value => {
    console.log(value); // Outputs: 'B' (the first promise to resolve)
  });

What are async functions and how do they work?

Async functions are a way to define functions that return a promise. You can use the await keyword inside async functions to pause execution until a promise is resolved or rejected.


async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

What is the purpose of the `await` keyword?

The await keyword is used to pause the execution of an async function until a promise is resolved. It can only be used inside async functions.


async function getUser() {
  const user = await fetchUser(); // Waits for the fetchUser promise to resolve
  console.log(user);
}

Can you use `try...catch` with async/await?

Yes, you can use try...catch blocks to handle errors in async functions, allowing you to manage exceptions from awaited promises.


async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

fetchData();

What are the benefits of using async/await over traditional promise chaining?

Benefits of using async/await include:

Improved readability: Async/await allows you to write asynchronous code that looks synchronous, making it easier to understand.
Better error handling: Using try...catch blocks simplifies error management.
Avoiding callback hell: Async/await reduces the complexity associated with deeply nested promise chains.

What is the event loop and how does it relate to asynchronous programming?

The event loop is a mechanism that allows JavaScript to perform non-blocking operations by managing the execution of code, events, and message handling. It enables JavaScript to run asynchronous tasks by placing them in a queue and executing them when the call stack is empty.

Ads

‹ JavaScript Interview