Promise

The Promise object, introduced in JavaScript ES6, was first created to solve the “callback hell” problem, which arises when callback functions accumulate during asynchronous operations.

While it works on the same principle, the Promise object provides better readability, which is why it is utilized. However, using many promise variables can lead to experiencing “promise hell” as well.

Response Time of Callback Functions, Promises, and Async/Await

The response time for both callback functions and promises is almost identical. They are read sequentially in the initial hoisting environment, causing the asynchronous part to be read before the previous processes are complete.

Components of a Web Browser

• Call Stack: A stack that holds functions to be executed sequentially in JavaScript.
• Web API: APIs provided by the web browser for performing asynchronous tasks, such as AJAX and setTimeout.
• Task Queue: Also known as the Callback Queue, it stores callback functions passed from the Web API.
• Event Loop: Checks if the Call Stack is empty; if it is, it moves tasks from the Task Queue to the Call Stack.

setTimeout(() => console.log("Async Hi hun"));
console.log("Hello! World");
// Hello! World
// Async Hi hun

Even though asynchronous code is executed first, we can see it printed later.