In the previous tutorials, you learned that modern browsers use a combination of task queues, an event loop, and a rendering pipeline that typically runs every sixteen milliseconds. You also learned that if a task takes longer than this window, the browser is unable to update the user interface, which leads to visible freezing, unresponsive…

In the previous tutorial, you learned that modern browsers use an event loop, multiple task queues, and a rendering pipeline that typically runs every sixteen milliseconds in order to maintain smooth animations and responsive user interactions. You also learned that if a JavaScript task takes longer than those sixteen milliseconds to complete, the browser is…

In the previous lessons, we explored different ways to write asynchronous code in JavaScript, such as: All these approaches help us deal with tasks that do not complete immediately, such as API calls, timers, or user interactions. However, an important question often remains unanswered: In what order are these asynchronous operations actually executed? More specifically:…

According to the definition, async is a keyword that allows an asynchronous function to be written in a way that looks synchronous. But let’s not focus on definitions too much.Instead, let’s understand what actually happens. When you place the async keyword before a function, JavaScript automatically makes that function return a promise. Even if you…

Revisiting the problem with Promise.race() Suppose Eugene answers in 1 second, but he doesn’t have a pen. John and Susie respond later, but they do have pens. Since Promise.race() reacts to the first settled promise, the final result becomes a rejection. Here’s how that situation looks in code: Output: Even though Susie could help, Promise.race()…

The Core Idea of Promise.race() Promise.race(): This means: Real-Life Example: Borrowing a Pen at School Let’s understand this with a simple real-world example. Imagine: Each one replies at a different speed. Their response times: Friend Response Time Has a Pen? John 3 seconds Yes Eugene 5 seconds No Susie 2 seconds Yes You don’t want…

In the previous lessons, we discussed Promise.all() and how it works when executing multiple asynchronous operations in parallel. You also saw an important limitation: If any one promise rejects, Promise.all() immediately rejects and stops waiting for the remaining promises. In this tutorial, we’ll explore a safer alternative — Promise.allSettled() This method allows you to run…

In many real-world applications, we often need to execute multiple asynchronous operations at the same time and wait for all of them to finish before proceeding. A very common example of this is when an application needs to make multiple HTTP requests in parallel — such as fetching data from different services — and only…

Understanding Promise.resolve() and Promise.reject() In this tutorial, we are going to understand two very important JavaScript methods that help us convert any value into a Promise: These methods are extremely useful when working with existing code that expects Promises, but sometimes you only have normal (non-promise) values. Why Do We Need This? In real-world JavaScript…

Using .then() with One or Two Arguments The .then() method can accept two arguments: So far, we mostly used .then() with only one argument, which handles successful cases. Example: Handling Both Success and Failure Let’s use our familiar calculateSquare function. This works correctly: However, this approach has a limitation. The Hidden Problem Let’s introduce an…