Clue Mediator

A Guide to Event Loop, Callbacks, Promises, and Async/Await in JavaScript

๐Ÿ“…June 20, 2023
๐Ÿ—JavaScript

JavaScript is a single-threaded language, meaning that it can only execute one task at a time. However, it is also capable of handling multiple tasks simultaneously using an event loop, callbacks, promises, and async/await functions. In this article, we will explore these concepts in detail and provide examples of their usage.

A Guide to Event Loop, Callbacks, Promises, and Async/Await

Event Loop

The event loop is a mechanism in JavaScript that allows it to handle multiple tasks by continuously checking the message queue for new tasks. It is responsible for executing tasks in the order they were added to the queue and ensuring that the JavaScript engine remains responsive. When a task is added to the message queue, it is processed only when the call stack is empty. In other words, the event loop waits until the current task is completed before executing the next task in the queue.

Callbacks

A callback is a function that is passed as an argument to another function and is executed after the parent function completes its task. Callbacks are commonly used in asynchronous programming in JavaScript, where a function that takes time to complete is called, and a callback is used to notify the calling function of the completion of the task. For example, the setTimeout() function takes a callback function as an argument and executes it after a specified delay.

setTimeout(() => {
  console.log("This is a callback function");
}, 1000);

Promises

Promises are a way to handle asynchronous code in JavaScript without using callbacks. They are objects that represent the eventual completion or failure of an asynchronous operation and allow you to chain multiple asynchronous operations together. Promises have three states: pending, fulfilled, and rejected. When a promise is created, it is in the pending state, and when it completes its task, it transitions to either fulfilled or rejected state. The then() method is used to handle the fulfilled state, and the catch() method is used to handle the rejected state.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

Learn more about promises:
Methods of Promises in JavaScript

Async/Await

Async/await is a feature in JavaScript that makes working with promises more comfortable. It allows you to write asynchronous code that looks like synchronous code, making it easier to read and understand. Async functions return a promise, and the await keyword is used to wait for the promise to resolve or reject. When the await keyword is used, the function execution is paused until the promise is resolved or rejected.

async function example() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise resolved");
    }, 1000);
  });

  const result = await promise;
  console.log(result);
}

example();

In conclusion, the event loop, callbacks, promises, and async/await are essential concepts in JavaScript that enable it to handle asynchronous code effectively. Understanding how they work is crucial to writing efficient and responsive JavaScript code.