Author: admin

JavaScript – Timing Events

What are the Timing Events?

JavaScript timing events are used to execute the code after a specified time only once or multiple times. In JavaScript, you can use the timing events to control when a particular task should be executed.

The ‘window’ object contains the various methods for timing events, which you can use to schedule the tasks. You can call these methods using the window object or without using it.

Here is the list of methods that can be used to schedule the tasks.

Method	Description
setTimeout()	To execute the code after N number of milliseconds only once.
clearTimeout()	To clear the timeout, which was set using the setTimeOut() method.
setInterval()	To execute the particular task after each N milliseconds.
clearInterval()	To clear the interval, which was set using the setInterval() method.

Let’s understand the timing events via the example below.

The setTimeout() Method

<html>
<body>
   <div id = "output">The message will be printed after 2000 milliseconds! <br></div>
   <script>
      setTimeout(() => {
         document.getElementById('output').innerHTML += 'Hello World <br>';
      }, 2000);
   </script>
</body>
</html>

Output

The message will be printed after 2000 milliseconds!
Hello World

The clearTimeout() Method

In the below example, we used the setTimeout() method to print the ‘hello world’ after 3000 milliseconds. We used clearTimeout() method to prevent setTimeout() method to execute.

Example

<html>
<body>
   <p>Message will print after 3 seconds.</p>
   <p>Click the button to prevent timeout to execute.</p>
   <p id="demo"></p>
   <button onclick="stop()">Clear Timeout</button>
   <script>
      const myTimeout = setTimeout(greet, 3000);
      function greet() {
         document.getElementById("demo").innerHTML = "Hello World!"
      }
      function stop() {
         clearTimeout(myTimeout);
      }
   </script>
</body>
</html>

Output

The setInterval() and clearInterval() Methods

In the code below, we have used the setInterval() method to show the number after incrementing by 10 and after each second.

When the number becomes 50, we stop the timer using the clearInterval() method.

Example

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let number = 10;
      let id = setInterval(() => {
         if (number == 50) {
            clearInterval(id);
            output.innerHTML += "The time is stopped."
         }
         output.innerHTML += "The number is: " + number + "<br>";
         number += 10;
      }, 1000);
   </script>
</body>
</html>

Output

The number is: 10
The number is: 20
The number is: 30
The number is: 40
The time is stopped.The number is: 50

Real-time Use Cases of Timing Events

Here, you will learn the real-time use cases of the timing events.

For animation and transition
For slideshow and carousel
For countdown timers
For user authentication timeouts
To autosave drafts like Google docs
To schedule notifications, email, message, etc.
To terminate the session as like banking websites
For progress bar

However, there are other use cases also. You can use the setTimeOut() or setInterval() methods to achieve the above functionalities.

Whats Next?

In the following chapters, you will learn setTimeOut() and setInterval() methods in detail.

January 5, 2026

JavaScript – Promises Chaining
The promise chaining in JavaScript can handle multiple related asynchronous operations even with a single promise. While a single promise handles a single asynchronous operation, the promise chaining allows you to create a sequence of promises. Here success or rejection of one promise triggers the execution of the next promise. This enables you to handle multiple asynchronous operations.

In JavaScript, we can produce the promise code using the Promise() constructor and consume using the then() method. It handles the single asynchronous operation. To handle the multiple asynchronous operations, we require to use the multiple promises, as shown in the example below.

Example

In the code below, we have defined promise1, which gets resolved in 1 second. Also, we have defined the global data variable.

After that, we used the then() method to consume the promise1, and inside the callback function, we stored the return value from the promise in the data.

Next, we have defined the promise2, which gets resolved after 2 seconds. Next, we used the then() method with promise2 and used the data variable inside the callback function.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");var data;// First promiselet promise1 =newPromise((resolve, reject)=>{setTimeout(()=>{resolve(10);},1000);});
      promise1.then((value)=>{
         data = value;// Stroing value into the data
         output.innerHTML +="The promise1 is resolved and data is: "+ data +"<br>";});// Second promiselet promise2 =newPromise((resolve, reject)=>{setTimeout(()=>{resolve(20);},2000);});
      promise2.then((value)=>{
         data = data * value;// Using the data from the first promise
         output.innerHTML +="The promise2 is resolved and data is: "+ value +"<br>";
         output.innerHTML +="The final value of the data is: "+ data +"<br>";});</script></body></html>
```
Output
```
The promise1 is resolved and data is: 10
The promise2 is resolved and data is: 20
The final value of the data is: 200
```
In the above example, we have created two different promises to perform multiple operations on the data returned from the promise1.

It increases the code complexity and decreases the readability.

Here, promise chaining comes into the picture.

JavaScript Promise Chaining

The concept of promise chaining in JavaScript allows you to do multiple related asynchronous operations with a single promise.

You can use the multiple then() methods while consuming the promise to perform the multiple asynchronous operations.

Syntax

The syntax of the promise chaining in JavaScript is as follows −
```
Promise
   .then(callback);.then(callback);....then(callback);
```
In the above syntax, we have used multiple then() methods to handle the multiple asynchronous operations. Each then() method executes the single callback function.

Example

In the code below, we have defined the promise1. After that, we used the promise chain to perform the multiple asynchronous operations.

From the first then() method, we return the value after multiplying with 2. In the next then() method, we print the updated value and return the new value after multiplying the old value with 2. Similarly, the operation we are doing is in the third then() method.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");const promise1 =newPromise((resolve, reject)=>{resolve(2);});// Promise chaining
      promise1
      .then((value)=>{
         output.innerHTML ="The square of 2 is "+ value *2+"<br>";return value *2;// Returning a promise for next then() method}).then((value)=>{
         output.innerHTML +="The square of 4 is "+ value *2+"<br>";return value *2;}).then((value)=>{
         output.innerHTML +="The square of 8 is "+ value *2+"<br>";});</script></body></html>
```
Output
```
The square of 2 is 4
The square of 4 is 8
The square of 8 is 16
```
Multiple Promise Handlers

You can also use the multiple promise handlers to consume the single promise. However, if you use multiple promise handlers, it is not called promise chaining.

Example

In the code below, we have created the promise1.

After that, we used the multiple promise handlers to consume the promise. Each promise handler solves the promise separately.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");const promise1 =newPromise((resolve, reject)=>{resolve(2);});

      promise1
      .then((value)=>{
         output.innerHTML +="Inside the first promise handler. <br>";return value *2;})

      promise1
      .then((value)=>{
         output.innerHTML +="Inside the second promise handler. <br>";return value *2;})

      promise1
      .then((value)=>{
         output.innerHTML +="Inside the third promise handler. <br>";return value *2;})</script></body></html>
```
Output
```
Inside the first promise handler.
Inside the second promise handler.
Inside the third promise handler.
```
Error Handling with Promise Chaining

You can use the catch() method with promise chaining to handle the error.

If you use the catch() method at last after all then() methods, it catches the error in any then() method and handles it. If you use the catch() method in between then() methods, it catches the error in the then() methods used before it.

Lets understand it via the example below.

Example

In the code below, we have defined the promise and rejected it.

After that, we used the promise chaining to consume the promise. We used two then() methods and 1 catch() after all then() methods.

In the output, you can see that as we rejected the promise, control goes into the catch() method.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");const promise1 =newPromise((resolve, reject)=>{reject("There is an error.");});

      promise1
      .then((value)=>{
         output.innerHTML +="The returned value is: "+ value +"<br />";return value +" Everything is fine!";}).then((value)=>{
         output.innerHTML += value;}).catch((error)=>{
         output.innerHTML += error;});</script></body></html>
```
Output
```
There is an error.
```
Returning the Promise

When you return the value from the then() method, it returns the promise by default and resolves it with a returned value, as it is an asynchronous method.

However, you can manually return the promise to reject the promise or perform any other operation.

Example

In the code below, we have defined the primise1 and used the setTimeOut() method inside the callback function.

After that, we consume the promise using multiple then() methods. From each then() method, we return a new promise.

When you return only the value from the then() method, it returns the promise, which gets resolved immediately. But when you want to add some delay, you can return the promise from then() method.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");const promise1 =newPromise((resolve, reject)=>{setTimeout(()=>{resolve("Stage 1");},500);});

      promise1
      .then((value)=>{
         output.innerHTML += value +"<br />";returnnewPromise((resolve, reject)=>{setTimeout(()=>{resolve("Stage 2");},1000);});}).then((value)=>{
         output.innerHTML += value +"<br />";returnnewPromise((resolve, reject)=>{setTimeout(()=>{resolve("Stage 3");},200);});}).then((value)=>{
         output.innerHTML += value +"<br />";
         output.innerHTML +="Finished";})</script></body></html>
```
Output
```
Stage 1
Stage 2
Stage 3
Finished
```
Converting Nested Callback Functions into the Promise Chaining

You learned about the nested callback functions in the JavaScript-callbacks’ chapter. It is also called the callback hell due to its complex syntax.

Here, we will learn to convert the callback hell into the promise chaining to make it more readable.

Lets look at the example of the nested callback functions.

Nested Callback functions

Example

In the code below, the updateData() function takes the data as a first parameter and the callback function as a second parameter.

The updateData() function calls the callback function by passing the data as an argument after 1000 milliseconds.

Next, we have invoked the updateData() function and passed the 10 as a first argument and the anonymous function as a callback function.

The callback function stores the resultant value into p after adding 1 to the num1 value.

Next, we call the updateData() function inside the callback function. Also, we have passed the data and callback function as an argument. This way, we have defined the nested callback functions.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");
      output.innerHTML +="Wait for updating the data...<br>";//    Callback hellfunctionupdateData(data, callback){setTimeout(()=>{callback(data);},1000);}updateData(10,function(num1){let p =1+ num1;updateData(30,function(num2){let q =1+ num2;updateData("The numeric value is: "+(p + q),function(answer){
               output.innerText += answer;});});});</script></body></html>
```
Output
```
Wait for updating the data...
The numeric value is: 42
```
Now, lets learn to convert the above example into promise chaining.

Converting nested callback functions to promise chaining

Example

In the code below, the updateData() function returns a single promise.

After that, we used the promise chaining, an alternative to the callback hell defined in the above example.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");
      output.innerHTML +="Wait for updating the data...<br>";functionupdateData(data){returnnewPromise((resolve, reject)=>{setTimeout(()=>{resolve(data);},1000);});}updateData(10).then((num1)=>{let p =1+ num1;returnupdateData(p);}).then((num2)=>{let q =31;returnupdateData("The final value is: "+(num2 + q));}).then((res)=>{
         output.innerText += res;});</script></body></html>
```
Output
```
Wait for updating the data...
The final value is: 42
```
Real-time Examples of Promise Chaining

In real-time development, you can use the promise chaining to fetch the data and perform the operations on the data.

Example

In the code below, when users click the fetch data button, it invokes the fetchData() function.

In the fetchData() function, we have used the fetch() API to fetch data from the API.

After that, we used the then() method to convert the data into JSON.

Next, we used the then() method again to print the JSON data.
```
<html><body><button onclick ="fetchData()"> Fetch Data </button><div id ="output"></div><script>let output = document.getElementById("output");functionfetchData(){fetch('https://jsonplaceholder.typicode.com/todos/1').then(response=> response.json())// Promise chaining.then((data)=>{
            output.innerHTML +="The data is - "+JSON.stringify(data);})}</script></body></html>
```
Output
January 5, 2026
JavaScript – Promisification
Promisification in JavaScript

Promisification in JavaScript is a concept to convert the callback functions into a regular function, returning the promise.

The reason to convert the callback functions into promises is that when you need to write the nested callback functions, it increases the complexity of the code. So, you can write a function returning the promise.

In JavaScript, you can pass the function as an argument of another function called the callback function. The callback functions are used to handle the asynchronous task.

Let’s first write an example of the callback function.

Callback Function

Example

In the below code, we have passed the callback function as a last argument of the getSum() function. The getSum() function calls the callback function after passing the error and resultant sum value as an argument.
```
<html><body><div id ="output">The sum of5 and 10 is:</div><script>functiongetSum(p, q, callback){let sum = p + q;setTimeout(()=>callback(null, sum),100);}getSum(5,10,(err, sum)=>{// callback function
         document.getElementById("output").innerHTML += sum;});</script></body></html>
```
Output
```
The sum of 5 and 10 is: 15
```
Lets perform the promisification of the callback functions discussed in the above example.

Promisification of Callback Fucntion

Example

Lets understand the below code step by step.

Step 1 − First, we have created the findSum() function. It takes the p1, p2, and callback function as a parameter.

Step 2 − Next, the findSum() function checks whether the p1 and p2 are valid. If not, it calls the callback function by passing the error as an argument.

Step 3 − In other cases, it calls the callback function by passing the sum and message as arguments.

Step 4 − Next, we have defined the promisifyFunc() function, which takes the function as an argument that is needed to promisify.

Step 5 − The promisifyFunc() function returns the function, and that function returns the promise.

Step 6 − In the promise, we have defined the callbackFunc() function, which resolves or rejects the promise based on the argument it receives.

Step 7 − Next, we insert the callbackFunc() function into the args array and use the call() method to call the func function, which we received as a parameter of the promisifyFunc() function.

Step 8 − After that, we call the promisifyFunc() function and store the returned function in the getSUmPromise() function.

Step 9 − When you execute the getSumPromise() function, it returns the promise, which you can consume the then() and catch() method.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");constfindSum=(p1, p2, callback)=>{if(!p1 ||!p2){returncallback(newError("Missing dependencies"),null);}const sum = p1 + p2;const msg ='The sum of numbers is '+ sum;returncallback(null, sum, msg);// We call the callback function}functionpromisifyFunc(func){return(...args)=>{// Returning a functionreturnnewPromise((resolve, reject)=>{// Returning a promise// Defining a custom callback for the functionfunctioncallbackFunc(err, ...data){if(err){returnreject(err)}returnresolve(data)}
               args.push(callbackFunc);// Adding callback function into argumentfunc.call(this,...args);// Calling the findSum() function})}}const getSumPromise =promisifyFunc(findSum)getSumPromise(5,10).then((message)=>{
         output.innerHTML = message;}).catch((err)=>{
         output.innerHTML = err;})</script></body></html>
```
Output
```
15,The sum of numbers is 15
```
The above code looks complex, but if you use it to handle the nested callback functions, it becomes easy to manage them. Here, you can pass custom callback functions to the particular function inside the promise.
January 5, 2026
JavaScript – Microtasks
Microtasks in JavaScript are small functions that are executed after the completion of the function or program code that creates them and if the JavaScript execution stack is empty. Microtasks are executed before any macrotasks, such as setImmediate() and setTimeout(). Microtasks are used to implement features such as promises.

JavaScript is a single-threaded programming language. However, you can use the promises, callbacks, and asynchronous functions to run the JavaScript code in parallel.

JavaScript runs the code based on the event loop. The event loop is responsible for executing the code, processing it, collecting the event data, and executing the sub-tasks.

Let’s understand the JavaScript event loop first.

JavaScript Event Loop

The event loop executes the JavaScript code line-by-line. It adds the code to the call stack, a queue to execute it.

JavaScript contains two types of queues to execute the tasks.
- Micro tasks queues
- Macro tasks queues
When the call stack queue is empty, the event loop executes all tasks inside the microtask queue. After that, it executes all functions and code in the Macro task queue.

We will understand more about the JavaScript code execution after understanding the micro and macro tasks.

What is Microtasks in JavaScript?

In JavaScript, a microtask is a shorter function that is produced by the promise, or asynchronous function, and consumed later.

Here is the list of Micro tasks.
- Promise callback
- Queue MicroTasks
Whatever callback function you pass as an argument of the then(), catch(), or finally() method while consuming the promise code it gets added into the microtask queue.

First, the JavaScript run engine executes the whole script, adds code from the main thread to the call stack, and micro-tasks into the microtask queue. When the execution of all tasks of the call stack is completed, it completes the execution of all tasks in the microtask queue.

Let’s understand it via the example below.

Example

In the code below, we print the start message at the start of the script and the end message at the end of the script.

In the middle, we have defined the promise, which gets resolved immediately. After that, we consumed the promise using the then() method and printed the message returned by the promise.
```
<html><body><div id ="output"></div><script>const output = document.getElementById("output");
      output.innerHTML +="The start of the code execution. <br>";// Creating the promiselet promise =newPromise(function(resolve, reject){resolve("The promise is resolved. <br>");});// Consuming the promise code
      promise.then(function(result){
         output.innerHTML += result;});
      output.innerHTML +="The end of the code execution. <br>";</script></body></html>
```
Output
```
The start of the code execution.
The end of the code execution.
The promise is resolved.
```
The interesting thing is happening in the output of the above code.

In the output, you can see that it prints the start, end, and promise messages at last.

Now, the question is why it happened. The answer is that the callback function of the then() method is added to the microtask queue, and it gets executed only if the call stack is empty.

What is Macrotaks?

Now, let’s understand what Macrotaks is.

The Macrotasks are also a short function that gets executed after the execution of all code, which is inside the call stack and microtask queue.

JavaScript run-time engine adds the macro tasks into the microtask queue.

The callback functions produced by the below methods get added to the Macrotask queue.
- setTimeout
- setInterval
- setImmediate
Let’s understand the Macrotaks via the example below.

Example

In the code below, we have added the start message, setTimeOut() method, and end message.

In the setTimeOut() method, we have passed the callback function as a first argument, printing the message in the output, and set 0 seconds delay.
```
<html><body><div id ="demo"></div><script>let output = document.getElementById("demo");
      output.innerHTML +="The start of the code execution.<br>";setTimeout(function(){
         output.innerHTML +="The code execution is being delayed for 0 seconds. <br>";},0);
      output.innerHTML +="The end of the code execution.<br>";</script></body></html>
```
Output
```
The start of the code execution.
The end of the code execution.
The code execution is being delayed for 0 seconds.
```
The output of the above code is also interesting.

It prints the start message first, the end message after that, and the message from the setTimeOut() method at the end.

Here, we set the 0 delay for the setTimeOut() method. Still, it gets executed at the end because the JavaScript run engine adds the callback function in the macro task queue.

Let’s understand the microtask and macro tasks together via the example below.

Example

In the code below, we have added the setTimeOut() method with 0 delay, and the callback function prints the message.

After that, we defined a promise using the Promise() constructor and consumed the promise code using the then() method.

At last, we have printed the end method.
```
<html><body><div id ="output"></div><script>let output = document.getElementById("output");
      output.innerHTML +="Start <br>";setTimeout(function(){// Macro task
         output.innerHTML +="In setTimeOut() method. <br>";},0);let promise =newPromise(function(resolve, reject){resolve("In Promise constructor. <br>");});
      promise.then(function(value){// Micro tasks
         output.innerHTML += value;});
      output.innerHTML +="End <br>";</script></body></html>
```
Output
```
Start
End
In Promise constructor.
In setTimeOut() method.
```
Lets understand the output of the above example.

First, it prints the start message due to the JavaScript call stack.

After that, it adds the callback function of the setTimeOut() method into the Macrotask queue.

Next, it adds the callback function of the then() method into the Microtask queue.

Next, it executes the last line of the code and prints the End message.

Now, the call stack is empty. So, it executes all tasks which are in the Microtask queue. So, it completes the execution of the callback function of the then() method.

Now, the call stack and Microtask queue are both empty. So, it executes all the tasks in the Macrotask queue and completes the execution of the callback function of the setTimeOut() method.

This chapter has demonstrated how the JavaScript run engine executes the code. If you want to change the execution order of the code, you can be careful about using the micro and macro tasks.
January 5, 2026
JavaScript – Async/Await
The JavaScript functions defined with the async/await keyword can perform the same task as promises with fewer lines of code, and it makes the code readable. The promise’s syntax is a bit complex, so the async/await syntax is introduced.

To use async/await, we need to define an aync function first. For this we write async before function definition. An async function returns a promise. The await keyword is used inside an async function only. The await keyword makes JavaScript to wait for the promise to resolve before continuing the function.

Let’s understand the async/await keywords in details taking them separately −

The JavaScript Async Keyword

A JavaScript function defined with the async keyword is called the asynchronous function. The async function allows you to produce the asynchronous code.

It always returns the promise. If you don’t return the promise manually and return the data, string, number, etc., it creates a new promise and resolves that promise with the returned value.

Syntax

You could use the syntax below to define a function using the async keyword in JavaScript −
```
asyncfunctionfunc_name(parameters){// function body}
```
In the above syntax, we have used the ‘async’ keyword before the function name.

Parameters
- Func_name − It is a valid identifier for the function name.
- Parameters − It takes multiple parameters, the same as a regular function.
Look at the below asynchronous function, returning the ‘hello world’ text. It returns the promise with the ‘hello world’ success message.
```
asyncfunctionprintMessage(){return"Hello World";}
```
The below code is similar to the above code.
```
functionprintMessage(){return Promise.resolve("Hello World");}
```
You can use the then() and catch() methods to solve the promise returned from the asynchronous function.

Example

We return the text from the getText() function in the code below.

After that, we use the then() and catch() method with the execution of the getText() method to consume the promise returned by the getText() function.

Here, you can observe that we have returned text from the asynchronous function, but it is returning the promise.
```
<html><body><div id ="output"></div><script>asyncfunctiongetText(){return"Text from the getText() function.";}getText().then((text)=>{
         document.getElementById('output').innerHTML = text +"<br>";}).catch((err)=>{
         document.getElementById('output').innerHTML +=JSON.stringify(err);});</script></body></html>
```
Output
```
Text from the getText() function.
```
JavaScript Await Keyword

You can use the await keyword inside a JavaScript asynchronous function only. It pauses the execution of the function until the promise gets settled, which means it is either rejected or fulfilled.

Syntax

Following is the syntax to use the await keyword inside an asyn function in JavaScript −
```
asyncfunctionfunc_name(parameters){await promise;// Function body}
```
In the above syntax, we have used the await keyword inside the async function.

Example

We have defined the solvePromise() async function in the code below. We have created the new promise using the Promise() constructor in the function. After that, we used the await keyword with the promise to resolve it rather than using the then() or catch() method.

In the output, you can observe that it prints the fulfillment message.
```
<html><body><div id ="output">The resultant value from the promise is:</div><script>asyncfunctionsolvePromise(){const promise =newPromise((resolve, reject)=>{resolve('Promise is solved');})const result =await promise;
         document.getElementById('output').innerHTML += result;}solvePromise();</script></body></html>
```
Output
```
The resultant value from the promise is: Promise is solved
```
Example (Waiting for Timeout)

In the code below, we set the timeout of 2000 milliseconds using the setTimeOut() method to resolve the promise.

After that, we used the await keyword with a promise to pause the execution of the function until the promise is settled. In the output, you can see that it prints the message returned from the promise after 2 seconds.
```
<html><body><div id ="output">The promise is being solved <br></div><script>asyncfunctionsolvePromise(){const promise =newPromise((resolve, reject)=>{setTimeout(()=>{// Setting up timeout for promisesresolve('The promise is solved after 2 seconds');},2000);})const result =await promise;
         document.getElementById('output').innerHTML += result;}solvePromise();</script></body></html>
```
Output
```
The promise is being solved
The promise is solved after 2 seconds
```
Error Handling with JavaScript Async/Await

While consuming the promise, we used the then() and catch() methods to handle the data and errors.

With the asynchronous function, you can use the trycatch block to handle the errors.

When the promise is fulfilled successfully, the control executes the remaining code of the try block. Otherwise, it executes the code of the catch block to fix the errors.

Syntax

Following is the syntax to handle errors in the asynchronous function −
```
try{const result =await promise;// Manipulate data}catch(err){// Handle errors}
```
We need to consume the promise in the try block and handle the errors in the catch block. The catch() method also takes the err as a parameter, which is a promise rejection message or an error object.

Example

In the code below, we have defined a promise and rejected it.

After that, we consume the promise in the try block. As the promise is rejected, the execution control will go into the catch block and print the rejection message.
```
<html><body><div id ="demo"></div><script>let output = document.getElementById('demo');asyncfunctionsolvePromise(){const promise =newPromise((resolve, reject)=>{reject("The promise is rejected");})try{const result =await promise;
            output.innerHTML +="Inside the try block. <br>";
            output.innerHTML += result;}catch(err){
            output.innerHTML +="Inside the catch block. <br>";
            output.innerHTML += err;}}solvePromise();</script></body></html>
```
Output
```
Inside the catch block.
The promise is rejected
```
JavaScript Async Class Methods

You can also define the asynchronous class methods using the async keyword to handle the asynchronous operations.

It has the same syntax as the asynchronous function.

Syntax

Following is the syntax to use the async/await with class methods in JavaScript −
```
asyncmethod_name(){returnawait promise;}
```
In the above syntax, method_name is an identifier for the class method, and it uses the async/await keyword to make the method asynchronous.

You can consume the promise returned by the method using the then() and catch() methods.

Example

In the below code, we have created the animal class.

The animal class contains the getAnimalName() method and returns the Lion text. We have used the await keyword before the Lion string, which pauses the execution of the method until the string is created. However, you can also return the promise.

After that, we use the then() method to consume the promise and print the animal name in the output.
```
<html><body><div id ="output"></div><script>classanimal{asyncgetAnimalName(){returnawait"Lion";}}const lionObj =newanimal();
      lionObj.getAnimalName().then((data)=>{
         document.getElementById('output').innerHTML ="The animal name is: "+ data;})</script></body></html>
```
Output
```
The animal name is: Lion
```
Real-time Example of JavaScript Async/Await

The above examples are basic examples to demonstrate the use of the async/await keywords in JavaScript.

Lets understand how to use the async/await in real-time development.

Example

In the code below, when the user clicks the button, it calls the getData() function.

The getData() function is an asynchronous function. We used the trycatch block inside the function to handle errors.

In the try block, we used the fetch() API to fetch the data from the API and used the await keyword.

After that, we used the json() method with the response to convert into the JSON and used the await keyword with that.

Next, we print the data.

Also, we print the error message in the catch() method.
```
<html><body><button onclick ="getData()">Get Data</button><div id ="demo"></div><script>let output = document.getElementById('demo');asyncfunctiongetData(){try{let response =awaitfetch('https://api.github.com/users');// Pauses the execution until it gets the datalet data =await response.json();// Pauses the execution until it converts the data into json
            output.innerHTML +="login: "+ data[0].login +"<br>";
            output.innerHTML +="id: "+ data[0].id +"<br>";
            output.innerHTML +="node_id: "+ data[0].node_id +"<br>";
            output.innerHTML +="avatar_url: "+ data[0].avatar_url +"<br>";}catch(err){
            output.innerHTML +="The error is: "+ json.stringify(err);}}</script></body></html>
```
Output

Benefits of Using JavaScript Async Function

Here are some benefits of using the asynchronous function.
- It increases the readability of code.
- It reduces the complexity of the code.
- It can handle multiple promises easily.
- It makes debugging easier.
- You can replace the callback function and promises with the asynchronous function.
January 5, 2026

JavaScript – Promises

What is Promise in JavaScript?

A JavaScript promise is an object that represents the completion or failure of an asynchronous operation. It employs callback functions to manage asynchronous operations, offering a easier syntax for handling such operations more easily.

A promise object can created using the Promise() constructor. The promise constructor takes a callback function as an argument. The callback function accepts two functions, resolve() and reject(), as arguments. The resolve function is called if the promise returns successfully. The reject function is called when taks fails and returns the reason.

Lets understand how to create promises in JavaScript.

Producing the Promise Code

Syntax

Follow the syntax below to create a promise using the Promise() constructor.

let promise =newPromise(Callback);// Producing the codeORlet promise =newPromise(function(resolve, reject){// Callback function body});

The Promise() constructor takes the callback function as a parameter. Creating the promise is also called code producing. Sometimes, you get promises returned by methods like fetch().

Parameters

The Promise() constructor takes only a single argument.

Callback − It is a callback function to fulfill the promise.

The callback function takes two parameters.

Resolve − You can use the resolve() function to return the successful response from the promise.
Reject − You can use the reject() function to reject the promise and return the error from the promise.

States of the Promise

There are 4 states of the Promise.

Promise.state	Description	Promise.result
Fulfilled	When a promise is completed with a successful response.	Resultant data
Rejected	When a promise is failed.	An error object
Pending	When a promise is pending to execute.	Undefined
Settled	When a promise is either fulfilled or rejected successfully.	Either result data or an error object

The state and result are the properties of the Promise object.

Promise Consumers of JavaScript

In the above section, we discussed how to produce the promise code. If you print the promise on the web page, it will show you [Object Promise].

Lets learn it via the example below.

Example

In the below code, we have used the Promise() constructor to define an instance of the Promise object.

In the callback function, we resolve the promise if the value of the num variable is 10. Otherwise, we reject the promise.

You can observe the promise1 in the output, it prints [Object Promise].

<html><body><div id ="output">The promise1 object is:</div><script>var num =10;const promise1 =newPromise((resolve, reject)=>{if(num ==10){resolve('The value of the number is 10 <br>');}else{reject('The value of the number is not 10 <br>');}});
      document.getElementById('output').innerHTML += promise1;</script></body></html>

Output

The promise1 object is: [object Promise]

To overcome the problem in the above example and get the resultant data from the promise, you are required to consume the promise code.

You can use the below methods with the promise object to consume the promise code.

then() method
catch() method

Lets learn to use both methods to consume the promise code.

JavaScript Promise then() Method

You can use the then() method with an instance of promise to consume its code. With promises, you can get the resultant data or error object using the then() method.

Syntax

You can follow the syntax below to use then() method to consume the promise code.

promise.then(successFunc, errorfunc);

In the abvoe syntax, promise is an instance of the Promise object.

Parameters

successFunc − It is a function that will be executed when the promise is fulfilled.
errorFunc − It is a function that will get executed when the promise is rejected.

Example

The example below contains the same code as the previous example. The main difference is that we have used the then() method to consume the code of the promise.

The promise will be fulfilled as the value of the num variable is 10. We passed the successFunc()and errorfunc() functions as an argument of the then() method.

In the output, you can observe that it executes the successFunc() function as the promise gets fulfilled.

<html><body><div id ="output"></div><script>const num =10;const promise1 =newPromise((resolve, reject)=>{if(num ==10){resolve('The value of the number is 10 <br>');}else{reject('The value of the number is not 10 <br>');}});
      promise1.then(successFunc, errorfunc);functionsuccessFunc(message){
         document.getElementById('output').innerHTML += message;}functionerrorfunc(message){
         document.getElementById('output').innerHTML += message;}</script></body></html>

Output

The value of the number is 10

Example

In the below code, we reject the promise if the value of the num variable is not equal to 20. Also, we used the setTImeOut() method to reject the promise after the delay of 2000 milliseconds.

In the output, you can observe that then() method executes the errorfunc() function as the promise is rejected.

<html><body><div id ="output"></div><script>var num =10;let promise1 =newPromise((resolve, reject)=>{if(num ==20){resolve('The value of the number is 20 <br>');}else{setTimeout(()=>{reject('The value of the number is not 20 <br>');},2000);}});
      output.innerHTML +="Wait for consuming the promise <br>";
      promise1.then(successFunc, errorfunc);functionsuccessFunc(message){
         document.getElementById('output').innerHTML += message;}functionerrorfunc(message){
         document.getElementById('output').innerHTML +="Error: "+ message;}</script></body></html>

Output

Wait for consuming the promise
Error: The value of the number is not 20

JavaScript Promise catch() Method

The catch() method of Promise instance allows you to catch the error. If any error occurs while settling the promise, the control flow comes into the catch() method.

Syntax

You can follow the syntax below to use the catch() method with promises.

promise
   .then(successFunc).catch(errorFunc);

We used the then() and catch() methods with promise in the above syntax.

You can see that we have passed only the single function to the then() method. So, it will handle the success response, and the catch() method will handle the error response.

Parameters

errorFunc − The errorFunc() callback function will be executed when the promise is rejected.

Example

In the code below, we have created a promise using the Promise() object, and we have rejected the promise.

While consuming the promise, we used the then() and catch() method. In the output, you can see that control goes into the catch() method directly, as we have rejected the promise.

<html><body><div id ="output"></div><script>var num =10;const promise =newPromise((resolve, reject)=>{reject("Promise is rejected!");});
      promise
      .then((message)=>{
         output.innerHTML += message;}).catch((message)=>{
         document.getElementById('output').innerHTML +="Inside the catch() method.<br>";
         document.getElementById('output').innerHTML += message;});</script></body></html>

Output

Inside the catch() method.
Promise is rejected!

JavaScript Promise finally() Method

The finally() method of the promise object can be used with the instance of the Promise object. The code of the finally() method always gets executed when the promise is fulfilled.

Syntax

Users can follow the syntax below to use the finally() method with promise.

promise
   .then(successFunc).catch(errorFunc).finally(callback);

In the above syntax, we have used the then(), catch(), and finally() methods with promise.

Parameters

Callback − It is a callback function that will always be executed when a promise is settled.

Example

In the code below, we have defined the promise and resolved it.

Also, we used the finally() method while consuming the code of the promise. In the output, you can observe that the JavaScript control first goes into the then() method and then goes to the finally() method.

<html><body><div id ="demo"></div><script>let output = document.getElementById('demo');const num =10;const promise =newPromise((resolve, reject)=>{resolve("Promise is resolved successfully!");});
      promise
      .then((message)=>{
         output.innerHTML +="Inside the then() method. <br>";
         output.innerHTML += message;}).catch((message)=>{
         output.innerHTML +="Inside the catch() method.<br>";
         output.innerHTML += message;}).finally(()=>{
         output.innerHTML +="<br>Inside the finally() method.";});</script></body></html>

Output

Inside the then() method.
Promise is resolved successfully!
Inside the finally() method.

The callback function of the finally() method is also executed even if the promise is rejected.

JavaScript Promise Reference

JavaScript Promise Constructor

You can call the Promise() constructor using the new keyword.

Constructor	Description
Promise()	It is used to create an instance of the Promise object.

JavaScript Promise Properties

Here, we have listed the properties of the Promise object.

Property	Description
constructor	To get the promise constructor function for the instance of the Promise object.

JavaScript Promise Methods

Static Methods

The static methods can be called by taking the Promise as a reference.

Method	Description
all()	To handle multiple promises. It takes the array of promises as an argument.
allSettled()	To get a promise when all promises are settled.
any()	It returns the single promise that is fulfilled earliest.
race()	To get a single promise from the iterable of promises.
reject()	To reject a promise with a reason.
resolve()	To fulfill the promise with data or reason.

Instance Method

The instance methods can be called by taking the instance of the Promise object as a reference.

Method	Description
catch()	To handle the error.
then()	To handle the resultant data and error.
finally()	It gets called when the promise is settled (fulfilled or rejected).

January 5, 2026

JavaScript – Callback Functions
What is the Callback Function?

The callback function in JavaScript is regularly passed as an argument of another function. Dont consider the callback as a name or keyword here. The callback function name can be any valid identifier.

The callback function can be called inside the parent function after completing the particular task in the parent function. It is mainly used to handle the asynchronous operations.

Syntax

You can follow the syntax below to use the callback functions.
```
functionfunc_name(callback){// function bodycallback();}func_name(callback);// Function invocationORfunc_name(()=>{// Callback function body})
```
In the above syntax, we have passed the callback as an argument of the func_name() function.

As shown in the above syntax, you can also pass the arrow or anonymous function as a callback function.

Example

In the below code, we have passed the multiply() function as an argument of the sum() function.

In the sum() function, we call the callback function at the end.
```
<html><body><div id ="output"></div><script>let output = document.getElementById('output');functionmultiply(a){let m = a *4;
         output.innerHTML ="The result is "+ m +".<br>";}functionsum(a, b, callback){let c = a + b;callback(c);// Invoking the callback funciton}sum(4,8, multiply);// Passing multiply function as a callback</script></body></html>
```
Output
```
The result is 48.
```
Passing the anonymous function as a callback

Example

In the code below, we have defined the mathOperations() function, which takes the callback function as an argument.

We call the callback function inside the mathOperations() function and get its returned value.

While calling the mathOperations() function, we have passed the different anonymous functions as an argument. This way, you can control which function you want to execute inside the particular function using the callback functions.
```
<html><body><div id ="output"></div><script>let output = document.getElementById('output');functionmathOperation(a, b, callback){let result =callback(a, b);
         output.innerHTML +="The result is "+ result +".<br>";}mathOperation(10,20,function(a, b){return a + b;// Callback function to add numbers});mathOperation(20,10,function(a, b){return a - b;// Callback function to subtract numbers});mathOperation(10,20,function(a, b){return a * b;// Callback function to multiply numbers});</script></body></html>
```
Output
```
The result is 30.
The result is 10.
The result is 200.
```
Need for the Callback Function

Now, lets understand the need for callback functions in real-time development.

JavaScript is a single-threaded programming language. So, it executes the code line-by-line. When you need to fetch the data from API, load images, or perform any asynchronous operations, it can take time and block the execution of the other code.

In such cases, you can use the callback function to execute the code, which must be executed after the asynchronous operation, and you can execute the other code without blocking it.

For example, you are making an API request and need the API data for validation purposes. So, you can perform the data validation in the callback function and continue running other tasks.

Lets understand it using the setTimeOut() method.

Example

In the below code, we use the setTimeOut() method to write the asynchronous code.

It executes the printMessage() function after the delay of the 500 milliseconds. We have passed the printMessage() function as a callback of the setTimeOut() method.

In the output, you can observe that the script runs without blocking, and it executes the printMessage() function after 500 milliseconds.
```
<html><body><div id ="output"></div><script>let output = document.getElementById('output');
      output.innerHTML +="Start of the program. <br>";setTimeout(printMessage,500);// Asynchronous codefunctionprintMessage(){
         output.innerHTML +="In the printMessage() function. <br>";}
      output.innerHTML +="End of the program. <br>";</script></body></html>
```
Output
```
Start of the program.
End of the program.
In the printMessage() function.
```
Callback Function with built-in Methods

Many built-in JavaScript method takes the callback function as an argument to execute the custom JavaScript code once the execution of the method is finished.

Here, we will look at 2 to 3 built-in methods, which take the callback function as an argument with examples.

JavaScript array.sort() method with a callback function

The array.sort() method is used to sort the array element. It sorts the array elements in ascending order by default. If you want to sort the array elements in descending order or any custom order, you can pass the callback function as an argument.

Syntax

Follow the syntax below to use the array.sort() method
```
arr.sort(callback);
```
The array.sort() method optionally takes the callback function as an argument. The callback function should return 0, 1, or -1.

Example

In the below code, we have defined the array containing the numeric values. First, we have used the sort() method without a callback function. You can see that it sorts the array in the ascending order.

After that, we passed the anonymous function as a callback function of the sort() method. The callback function returns the difference between element b and a to sort the array in descending order.
```
<html><body><div id ="output"></div><script>let output = document.getElementById('output');let arr =[23,21,56,11,10,7,8];
      output.innerHTML +="The sorted array is - "+ arr.sort();// Sorting array in descending orderlet sorted = arr.sort(function(a, b){return b - a;});
      output.innerHTML +="<br>The sorted array in descending order is - "+ sorted;</script></body></html>
```
Output
```
The sorted array is - 10,11,21,23,56,7,8
The sorted array in descending order is - 56,23,21,11,10,8,7
```
JavaScript array.filter() method with the callback functions

The array.filter() method is used to filter the array elements. It takes the callback function as an argument. If the callback function returns true, it filters the element. Otherwise, it skips the array element.

Syntax

Follow the syntax below to use the array.filter() method.
```
Array.filter(callback);
```
The callback function must return the boolean value.

Example

In the below code, we have passed the filterCallback() function as a callback of the filter() method. The filterCallback() function returns the boolean value if the number is even.

At last, you can see the filtered even number in the output.
```
<html><body><div id ="output"></div><script>let output = document.getElementById('output');let arr =[23,21,56,11,10,7,8];let eventNums = arr.filter(filtercallback);functionfiltercallback(element){return element %2==0;}
      output.innerHTML +="The original array is: "+ arr +"<br>";
      output.innerHTML +="The even numbers are: "+ eventNums;</script></body></html>
```
Output
```
The original array is: 23,21,56,11,10,7,8
The even numbers are: 56,10,8
```
Callback Function with Events

You can use the addEventListner() method in JavaScript to listen for the event. The addEventListener() method takes the callback function as a second parameter.

It executes the callback function whenever a specified event gets triggered on the web page.

Syntax

Follow the syntax below to use the addEventListener() method.
```
Element.addEventListener(event, callback);
```
In the above syntax, an event is a string representing the event’s name, and a callback is a function that should be executed when an event triggers.

Example

In the below code, we have created the button.

In JavaScript, we accessed the button using its id and added the click event.

Whenever the user clicks the button, it will print the message.
```
<html><body><button id ="btn"> Click Me </button><p id ="output"></p><script>let output = document.getElementById('output');let button = document.getElementById('btn');
      button.addEventListener('click',function(){
         output.innerHTML ='You have clicked the button. <br>';});</script></body></html>
```
Output

Nesting Callbacks and Callback Hell

You can have nested callback functions like the nested loop or if-else statement in JavaScript. If the first function is dependent on the data of the second function, and the second function is dependent on the data of the third function, you may require the nested callback function.

Lets understand it via the example below.

Example

The asyncTask() function completes the tasks in the below code and calls the callback function passed as an argument.

After that, we called the asyncTask() function and passed the callback function as a third argument. In the callback function, we have called the asyncTask() function again and passed the callback function as a third argument.

In this way, we have used the callback functions at 3 nested levels.
```
<html><body><div id ="output"></div><script>let output = document.getElementById('output');functionasyncTask(taskName, duration, callback){
         output.innerHTML +="Task started "+ taskName +"<br/>"setTimeout(()=>{
            output.innerHTML +='Completed '+ taskName +'<br/>';callback();}, duration);}// Task 1asyncTask('Task 1',1000,()=>{// Task 2asyncTask('Task 2',1500,()=>{// Task 3asyncTask('Task 3',1000,()=>{
               output.innerHTML +="All tasks completed";});});});</script></body></html>
```
Output
```
Task started Task 1
Completed Task 1
Task started Task 2
Completed Task 2
Task started Task 3
Completed Task 3
All tasks completed
```
Due to its complex syntax of the nested callback, its also called the callback hell.

Whenever you need to use the nested callback functions, you can use the promises or async/await to write the simpler code.

In the upcoming chapters, you will learn the promises and async/await to handle the asynchronous operations.
January 5, 2026
Asynchronous JavaScript
Asynchronous JavaScript is a programming technique that enables your program to start a potentially long-running task and continue to executing other tasks parallelly. JavaScript is a single-threaded programming language. It means you can execute a single script or particular code at a time. JavaScript control flow moves the line by line and executes each line of code.

We can implement asynchronous operations in our JavaScript programs using callback functions, promises, async/await etc. The callback functions are functions passed as arguments to other functions. The promises are objects representing the success of failure of an asynchronous operation. The async/await syntax is simple implementation of promises. We will discuss these approaches in details in respective chapters.

To perform the multiple tasks parallelly, you need asynchronous JavaScript.

Lets understand what synchronous JavaScript is before understanding asynchronous JavaScript.

What is Synchronous JavaScript?

The Synchronous JavaScript executes the JavaScript code line-by-line. The control flow moves from top to bottom and runs each statement one by one.

Lets understand it via the example below.

Example

The control flow for the code is given below.
- It calls the test1() function.
- In the test1() function, it prints the start message.
- Next, it calls the test2() function.
- The test2() function prints the start and end messages.
- After that, it prints the end message in the test1() function.
- End of the code execution.
```
<html><body><div id ="demo"></div><script>let output = document.getElementById('demo');functiontest2(){
         output.innerHTML +='<br>test2 started!';
         output.innerHTML +='<br>test2 finished!';}functiontest1(){
         output.innerHTML +='test1 started!';test2();
         output.innerHTML +='<br>test1 finished!';}test1();</script></body></html>
```
Output
```
test1 started!
test2 started!
test2 finished!
test1 finished!
```
It creates a call stack, adds the code to it, and executes the code in the last in, first out (LIFO) order.

Now, lets understand that what is the asynchronous JavaScript.

What is Asynchronous JavaScript?

Asynchronous JavaScript enables simultaneous code execution. You can use asynchronous JavaScript to make your application multi-threaded. It allows you to perform time-consuming or expensive tasks together.

Lets understand the Asynchronous JavaScript via the example below.

Example

The execution flow of the code is explained below.
- It prints the start message.
- After that, it prints the end message without waiting until the execution of the setTimeOut() method is finished.
- At last, it executes the code of the setTimeOut() method.
```
<html><body><div id ="demo"></div><script>let output = document.getElementById('demo');
      output.innerHTML +="Code execution started. <br>";setTimeout(function(){
         output.innerHTML +="setTimeout() called. <br>";},1000);
      output.innerHTML +="Code execution finished. <br>";</script></body></html>
```
Output
```
Code execution started.
Code execution finished.
setTimeout() called.
```
By writing the asynchronous JavaScript code, you can execute another JavaScript code without waiting to finish the execution of the particular code.

Why Do We Need Asynchronous JavaScript?

In the above section, we have learned to write the asynchronous JavaScript code via simple example. But the question is when you need to write the asynchronous JavaScript code as you dont need to perform simple tasks like printing the messages.

Lets understand it via the example below.

Example

In the below code, we find the first 10 lakh prime numbers. For that, we traverse through numbers and check whether the number is prime using the checkForPrime() function.

In the code, you can click the generate prime button. The code will start finding the first 10 lakh prime numbers. After that, you can immediately click the print message button to print the message. You can observe that the web page is responsive and does not print any message.

However, it will print the message once the execution of the getPrimes() function is finished.

So, it is necessary to complete such time-expensive tasks parallelly. Otherwise, it makes the web page unresponsive.
```
<html><body><button onclick ="getPrimes()"> Generate primes </button><button onclick ="printMessage()"> Print Message </button><div id ="demo"></div><script>let output = document.getElementById('demo');// Function to check whether the number is a prime numberfunctioncheckForPrime(num){for(let p =2; p <= Math.sqrt(num); p++){if(num % p ===0){// Check whether the number is divisible by preturnfalse;}}return num >1;}functiongetPrimes(){const primeNums =[];// Array to store prime numberslet p =1;while(primeNums.length <1000000){// Find first 10 lakh prime numbersif(checkForPrime(p)){
               primeNums.push(p);}
            p++;}
         output.innerHTML +="The execution of the getPrime() function is completed. <br>";}functionprintMessage(){// Function to print the message
         output.innerHTML +="Button is clicked! <br>";}</script></body></html>
```
Output

Real-time Use Cases of Asynchronous JavaScript

Here are the real-time use cases of asynchronous JavaScript.

Fetching data from API

When you fetch data from the API, it takes time to get the data according to the server’s response time. So, you can use the asynchronous JavaScript to continue the execution of the other code without waiting for the API response.

Loading external resources

Sometimes, it happens that you need to load multiple libraries, external scripts, images, etc., into the application. The web page doesnt allow you to interact with the web page without loading all external resources. So you can load the external resources asynchronously.

Task scheduling

You can use asynchronous JavaScript to schedule the tasks using the setTimeOut() method or perform tasks after a particular interval using the setInterval() method.

Data validation

Sometimes, developers are required to do data validation. You can perform such tasks in the background or parallel with other codes.

File uploads

If you allow users to upload large files, it may take time to upload according to users’ internet speed. So you can execute the file uploading asynchronously.

Data caching

The data caching is one of the most important features of the application to increase the performance and may take time according to the data size. So, you can use the promises to cache the data asynchronously.
January 5, 2026
JavaScript – ECMAScript 2022
The ECMAScript 2022 standard was released in 2022. Important features added to this update include private methods and fields, Array at() and String at() methods etc. This chapter discuss all the newly added features in ECMAScript 2022.

New Features Added in ECMAScript 2022

Here are the new methods, features, etc., added to the ECMAScript 2022 version of JavaScript.
- Array at() Method
- String at() Method
- Private methods and fields
- Object.hasOwn()
- error.cause
- await import
Here, we have explained each feature in detail.

Array at() Method

ECMAScript 2022 (ES2022) introduced Array at() method to arrays. In JavaScript, array at() method used to access the array element from the particular index. You can’t use the negative index in the arr[index] representation, but with the array.at() method, you can also use the negative index to access array elements.

When you use the negative index, it returns the array from the last.

Example

In the below code, we access the last and third-last elements from the array using the negative indexes and array.at() method.
```
<body><div id ="demo1">The last array element is:</div><div id ="demo2">The third last array element is:</div><script>const arr =[10,20,60,72,6,12,23];
      document.getElementById("demo1").innerHTML += arr.at(-1);
      document.getElementById("demo2").innerHTML += arr.at(-3);</script></body></html>
```
Output
```
The last array element is: 23
The third last array element is: 6
```
String at() Method

ECMAScript introduced String at() method to strings. In JavaScript, the String at() method is used to access the characters from the particular string index. It also accepts the negative index as an argument.

Example

In the code below, we access the last and fourth last characters from the string using the negative indexes and string.at() method.
```
<html><body><div id ="demo1">The last string character is:</div><div id ="demo2">The fourth last string character is:</div><script>let str ="Hello world";
      document.getElementById("demo1").innerHTML += str.at(-1);
      document.getElementById("demo2").innerHTML += str.at(-4);</script></body></html>
```
Output
```
The last string character is: d
The fourth last string character is: o
```
Private Methods and Fields

ECMAScript 2022 introduced the way to write private methods and fields. In JavaScritp, you can write the field name or method name followed by the hash sign (‘#’) to make them private. You can’t access the private fields and methods using the class instance. However, you can access them inside the class.

Example

In the below code, the car class contains the ‘brand’ private field and the ‘carBrand’ private method. The getBrand() method is public.

We have created the instance of the car class and invoked the getBrand() method using it. The getBrand() method calls the carBrand() method.
```
<html><body><div id ="output"></div><script>classcar{
         #brand;constructor(brand){this.#brand = brand;}getBrand(){returnthis.#carBrand();}#carBrand(){return"The car brand is "+this.#brand;}}constBMW=newcar("BMW");
      document.getElementById("output").innerHTML =BMW.getBrand();</script></body></html>
```
Output
```
The car brand is BMW
```
Object hasOwn() Method

The Object.hasOwn() method is a replacement for the Object.hasOwnProperty() method. It is used to check whether the object contains a particular property.

Example

In the code below, we use the hasOwn() method to check whether the obj object contains the name property.
```
<html><body><div id ="output"></div><script>const obj ={
         name:"sam",
         age:50,}
      document.getElementById("output").innerHTML ="Does obj contain name property? "+ obj.hasOwnProperty("name");</script></body></html>
```
Output
```
Does obj contain name property? true
```
The error.cause Property

The ’cause’ is a property of the JavaScript object. It represents the reason for the error. It is introduced in ECMAScript 2022.

Example

In the below code, we throw a new error from the ‘try’ block. Also, we specify the reason for the error using the cause property.

We access the ’cause’ property value in the catch block to know the reason.
```
<html><body><div id ="demo"></div><script>let output = document.getElementById("demo");try{
         output.innerHTML +="Inside the try block <br>";thrownewError("New error",{ cause:"Testing with error."})}catch(error){
         output.innerHTML +="The reason for the error is: "+ error.cause +"<br>";}</script></body></html>
```
Output
```
Inside the try block
The reason for the error is: Testing with error.
```
The Await Import

You can use the asynchronous import to import the dynamic modules. You need to use the ‘await’ keyword for the asynchronous import.

For example, the below code contains the self-invoking asynchronous function. Also, the ‘await’ keyword is used inside the function to await the import.
```
(asyncfunction(){await(awaitimport('./math.js')).default();await(awaitimport('./operations.js')).default();})();
```
Warning Some of the above features are not supported by some browsers. So, you can use the polyfill to avoid errors.
January 5, 2026
JavaScript – ECMAScript 2021
The ECMAScript 2021 standard was released in 2021. ECMAScript 2021 brought many notable features to JavaScript. The introduction of the String replaceAll() method simplified global string replacement. Logical Assignment Operators, (&&=, ||=, and ??=), enhanced code conciseness. This update focused on improving developer productivity and code readability.

This chapter will discuss all the newly added features in ECMAScript 2021.

New Features Added in ECMAScript 2021

Here are the new methods, features, etc., added to the ECMAScript 2021 version of JavaScript.
- Numeric Separators (_)
- Promise any() method
- String replaceAll() method
- Logical AND Assignment Operator (&&=)
- Logical OR Assignment (||=)
- Nullish Coalescing Assignment (??=)
Here, we have explained each feature in detail.

Numeric Separators (_)

ECMAScript 2021 introduced numeric separators. The numeric seprators are used to make the number more readable.

Example

We added a numeric separator in the code below to make the number more readable.
```
<html><body><div id ="output">The value of the num is:</div><script>let num =90_00_000;
      document.getElementById("output").innerHTML +=  num;</script></body></html>
```
Output
```
The value of the num is: 9000000
```
Promise any()Method

ECMAScript 2021 introduced Promise any() method. The promise.any() method fulfills any promise from the array of promises, which resolves at the earliest.

Example

In the below code, we have created multiple promises and passed them as an argument of the Promise.any() method.

We have resolved the promise1 and rejected the promise2. For the Promise.any() method, JavaScript control goes into the then() block as promise1 gets resolved.
```
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");const promise1 =newPromise((res, rej)=>res());const promise2 =newPromise((res, rej)=>rej());const promises =[promise1, promise2];

      Promise.any(promises).then(()=>{
            output.innerHTML +='One or more promises are resolved!';}).catch((err)=>{
            output.innerHTML +='All promises are rejected:'+ err;});</script></body></html>
```
Output
```
One or more promises are resolved!
```
String replaceAll() Method

The ECMAScript 2021 introduced String replaceAll() method to the Strings. The string replaceAll() method is used to replace the particular substring with another substring.

The replaceAll() method takes either string or regular expression as a parameter.

Example

In the below code, we have replaced the lowercase ‘a’ with the uppercase ‘A’ using the replaceAll() method.
```
<html><body><div id ="output1">Original string is:</div><div id ="output2">Updated string is:</div><script>let str ="abcd abcd abcd abcd";
      document.getElementById("output1").innerHTML += str;let updatedStr = str.replaceAll("a","A");
      document.getElementById("output2").innerHTML += updatedStr;</script></body></html>
```
Output
```
Original string is: abcd abcd abcd abcd
Updated string is: Abcd Abcd Abcd Abcd
```
Logical AND Assignment Operator (&&=) Operator

ECMAScript 2021 introduced the logical assignment operators (&&=, ||= and ??=) to the operators. The JavaScript logical AND Assignment operator updates the value of the first operand with the second operand if the first operand is true.

Example

In the code below, the str string’s value is not falsy. So, it updates the value of an str variable with ‘Hi’.
```
<html><body><div id ="output">The value of the str is:</div><script>let str ="Hello";
      str &&="Hi";
      document.getElementById("output").innerHTML += str;</script></body></html>
```
Output
```
The value of the str is: Hi
```
Logical OR Assignment (||=) Operator

ECMAScript 2021 introduced the logical OR Assignment operator to operators. It updates the value of the first operand with the second operand if the first operand is false.

Example

In the code below, the initial value of the str is false. So, the Logical OR assignment operator updates its value with the second operand, which is 10.
```
<html><body><div id ="output">The value of the str is:</div><script>let str =false;
      str ||=10;
      document.getElementById("output").innerHTML += str;</script></body></html>
```
Output
```
The value of the str is: 10
```
Nullish Coalescing Assignment (??=) Operator

The ECMAScript 2021 introduced the nullish coalescing assignment operator to operators. This operator updates the value of the left operand if it is undefined or null.

Example

In the below code, the value of the str variable is null. So, the nullish coalescing assignment operator assigns the ‘default’ value to the str variable.
```
<html><body><div id ="output">The value of the str is:</div><script>let str =null;
      str ??="default";
      document.getElementById("output").innerHTML += str;</script></body></html>
```
Output
```
The value of the str is: default
```
Warning Some of the above features are not supported by some browsers. So, you can use the polyfill to avoid errors.
January 5, 2026

Author: admin

What are the Timing Events?

The setTimeout() Method

Output

The clearTimeout() Method

Example

Output

The setInterval() and clearInterval() Methods

Example

Output

Real-time Use Cases of Timing Events

Whats Next?

Example

Output

JavaScript Promise Chaining

Syntax

Example

Output

Multiple Promise Handlers

Example

Output

Error Handling with Promise Chaining

Example

Output

Returning the Promise

Example

Output

Converting Nested Callback Functions into the Promise Chaining

Nested Callback functions

Example

Output

Converting nested callback functions to promise chaining

Example

Output

Real-time Examples of Promise Chaining

Example

Output

Promisification in JavaScript

Callback Function

Example

Output

Promisification of Callback Fucntion

Example

Output

JavaScript Event Loop

What is Microtasks in JavaScript?

Example

Output

What is Macrotaks?

Example

Output

Example

Output

The JavaScript Async Keyword

Syntax

Parameters

Example

Output

JavaScript Await Keyword

Syntax

Example

Output

Example (Waiting for Timeout)

Output

Error Handling with JavaScript Async/Await

Syntax

Example

Output

JavaScript Async Class Methods

Syntax

Example

Output

Real-time Example of JavaScript Async/Await

Example

Output

Benefits of Using JavaScript Async Function

What is Promise in JavaScript?

Producing the Promise Code

Syntax

Parameters