In JavaScript, cookies are piece of data stored in the user’s web browser. The cookies are stored in the key-value pair inside the browser. We can manipulate the cookies using cookie property of document object. We can set or store a cookie in key-value pair using the cookie property. We can read cookies using document’s cookie property and extract the desired information using destructuring.
Why are Cookies needed?
Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages.
For example, you have logged in to a particular website on a particular web page. How do other webpages of the same website know your state that you have already completed the logged-in process? In this case, cookies are used.
In many situations, using cookies is the most efficient method of remembering and tracking preferences, purchases, commissions, and other information required for better visitor experience or site statistics.
Sometimes, cookies are also used for caching, increasing the website or application performance.
How It Works ?
Your server sends some data to the visitor’s browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor’s hard drive. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields −
Expires − The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
Domain − The domain name of your site.
Path − The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.
Secure − If this field contains the word “secure”, then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
Name=Value − Cookies are set and retrieved in the form of key-value pairs
Cookies were originally designed for CGI programming. The data contained in a cookie is automatically transmitted between the web browser and the web server, so CGI scripts on the server can read and write cookie values that are stored on the client.
Setting/ Storing Cookies
JavaScript can manipulate cookies using the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookies that apply to the current web page.
The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks like this.
Here the expires attribute is optional. If you provide this attribute with a valid date or time, then the cookie will expire on a given date or time and thereafter, the cookies’ value will not be accessible.
The cookie string contains the key-value pairs separated by the semi-colons.
Note − Cookie values may not include semicolons, commas, or whitespace. For this reason, you may want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape() function when you read the cookie value.
Example
Try the following. It sets a customer name in an input cookie.
<html><head><script type ="text/javascript">functionWriteCookie(){if( document.myform.customer.value ==""){alert("Enter some value!");return;}
cookievalue =escape(document.myform.customer.value)+";";
document.cookie ="name="+ cookievalue;
document.write("Setting Cookies : "+"name="+ cookievalue );}</script></head><body><form name ="myform" action ="">
Enter name:<input type ="text" name ="customer"/><input type ="button" value ="Set Cookie" onclick ="WriteCookie();"/></form></body></html></pre>
Now your machine has a cookie called name. You can set multiple cookies using multiple key = value pairs separated by comma.
Reading Cookies
Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the cookie. So you can use this string whenever you want to access the cookie. The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.
You can use strings' split() function to break a string into key and values as follows −
Example
Try the following example to get all the cookies.
<html><head><script type ="text/javascript">functionReadCookie(){var allcookies = document.cookie;
document.write("All Cookies : "+ allcookies );// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');// Now take key value pair out of this arrayfor(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write("Key is : "+ name +" and Value is : "+ value);}}</script></head><body><form name ="myform" action =""><p> click the following button and see the result:</p><input type ="button" value ="Get Cookie" onclick ="ReadCookie()"/></form></body></html></pre>
Note − Here length is a method of Array class which returns the length of an array. We will discuss Arrays in a separate chapter. By that time, please try to digest it.https://www.tutorialspoint.com/javascript/src/reading_cookies.htm
Note − There may be some other cookies already set on your machine. The above code will display all the cookies set on your machine.
Setting Cookies Expiry Date
You can extend the life of a cookie beyond the current browser session by setting an expiration date and saving the expiry date within the cookie. This can be done by setting the expires attribute to a date and time.
Example
Try the following example. It illustrates how to extend the expiry date of a cookie by 1 Month.
<html><head><script type ="text/javascript">functionWriteCookie(){var now =newDate();
now.setMonth( now.getMonth()+1);
cookievalue =escape(document.myform.customer.value)+";"
document.cookie ="name="+ cookievalue;
document.cookie ="expires="+ now.toUTCString()+";"
document.write("Setting Cookies : "+"name="+ cookievalue );}</script></head><body><form name ="myform" action ="">
Enter name:<input type ="text" name ="customer"/><input type ="button" value ="Set Cookie" onclick ="WriteCookie()"/></form></body></html></pre>
Sometimes you will want to delete a cookie so that subsequent attempts to read the cookie return nothing. To do this, you just need to set the expiry date to a time in the past.
Example
Try the following example. It illustrates how to delete a cookie by setting its expiry date to one month behind the current date.
<html><head><script type ="text/javascript">functionWriteCookie(){var now =newDate();
now.setMonth( now.getMonth()-1);
cookievalue =escape(document.myform.customer.value)+";"
document.cookie ="name="+ cookievalue;
document.cookie ="expires="+ now.toUTCString()+";"
document.write("Setting Cookies : "+"name="+ cookievalue );}</script></head><body><form name ="myform" action ="">
Enter name:<input type ="text" name ="customer"/><input type ="button" value ="Set Cookie" onclick ="WriteCookie()"/></form></body></html></pre>
To update the particular key-value pair in the cookie, you can assign new key-value pair to the document.cookie property. Here, you need to ensure you are using the same key whose value you want to update.
Syntax
Follow the syntax below to update the cookies.
document.cookie="key1=value1";
In the above syntax, we are updating the value of the key cookie.
Example
In the code below, click the set cookies button to set the cookies. It will set the watch value for the cartItem and 10000 for the price.
After that, you can click the get cookies button to observe the cookies.
Next, you can click on the update cookies button to update the cookies. It will change the cartItem value to bag and the price to 5000.
Now, click the get cookies button again to get the updated cookie value.
<html><body><p id ="output"></p><button onclick ="setCookies()"> Set Cookie </button><br><br><button onclick ="updateCookies()"> Update Cookie </button><br><br><button onclick ="getCookies()"> Get Cookies </button><script>let output = document.getElementById("output");functionsetCookies(){
document.cookie ="cartItem=watch";
document.cookie ="price=10000";}functionupdateCookies(){// Updating cookies
document.cookie ="cartItem=bag";
document.cookie ="price=5000";}functiongetCookies(){//Spliting the cookie stringconst allCookies = document.cookie.split("; ");
output.innerHTML ="The cookie data are : <br>";for(const cookie of allCookies){const[key, value]= cookie.split("=");if(key =="cartItem"|| key =="price"){
In JavaScript, the setInterval() is a window method that is used to execute a function repeatedly at a specific interval. The setTimeout() Method allows you to execute the function only once after the specified time.
The window object contains the setInterval() method. However, you can execute the setInterval() Method without taking the window object as a reference.
Syntax
Following is the syntax to use the setInterval() method in JavaScript
The first two parameters are required others are optional.
Parameters
Callback − It is a callback function that will be executed after every interval.
Interval − It is the number of milliseconds after the callback function should be executed.
Arg1, arg2, arg3, , argN − They are multiple arguments to pass to the callback function.
Return Value
The setInterval() method returns the numeric id.
Example
In the code below, the startTimer() function uses the setInterval() method to call the timer() function after every 1000 milliseconds.
The timer() function increases the value of the second global variable every time it is called by the setInterval() method and prints the counter.
You can click the button to start a timer in the output.
<html><body><button onclick ="startTimer()">Start Timer</button><div id ="output"></div><script>let output = document.getElementById('output');var seconds =0;functionstartTimer(){setInterval(timer,1000);// Calls timer() function after every second}functiontimer(){// Callback function
The below example contains almost the same code as the above example. Here, we have passed the arrow function as a first argument of the setInterval() method rather than passing the function name only. You can click the button to start the timer.
seconds++;
output.innerHTML +="Total seconds are: "+ seconds +"<br>";},1000);// Calls timer() function after every second}</script></body></html></pre>
Output
Passing More than 2 Arguments to setInterval() Method
In the code below, we have passed 3 arguments to the setInterval() method. The first argument is a callback function to print the date, the second argument is an interval, and the third argument will be passed to the callback function.
Example
<html><body><button onclick ="startTimer()">Start Date Timer</button><div id ="output"></div><script>let output = document.getElementById('output');var seconds =0;functionstartTimer(){let message ="The date and time is: ";setInterval(printDate,1000, message);}functionprintDate(message){let date =newDate();
output.innerHTML += message + date +"<br>";}</script></body></html></pre>
Output
The clearInterval() Method in JavaScript
The JavaScript clearInterval() method is used to stop the code execution started using the clearItnerval() method.
It takes the numeric id returned by the setInterval () method as an argument.
Syntax
Follow the syntax below to use the clearInterval() method.
clearInterval(id);
Here id is an id returned by the setInterval() method.
Example
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.
<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></pre>
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 Case of the setInterval() Method
In the above examples, we have printed the messages using the setInterval() method. In this section, we will see the real-time use cases of the setInterval() method.
Here, we have listed some of the real-time use cases.
To refresh the date
For slideshow
For animation
To show the clock on the webpage
To update live cricket score
To update weather information
To run cron jobs
Here are the real-time examples of the setInterval() method.
Flipping the color of the HTML element after each interval
In the code below, we flip the color of the <div> element after every second.
We have defined the div element in the HTML body.
In the <head> section, we have added the red and green classes. Also, we added the background color in the red and green classes.
In JavaScript, we have passed the callback function as the first argument of the setInterval() method, which will be called after every 1000 milliseconds.
We access the <div> element in the callback function using its id. After that, we check whether the classList of the <div> element contains the red class. If yes, we remove it and add the green class. Similarly, if classList contains the green class, we remove it and add the red class.
This is how we are flipping the color of the <div> element using the setInterval() method.
#square {height:200px; width:200px;}</style></head><body><div>Using setInterval() method to flip the color of the HTML element after each interval</div><div id ="square"class="red"></div><script>let output = document.getElementById('output');setInterval(function(){let square = document.getElementById('square');if(square.classList.contains('red')){
square.classList.remove('red');
square.classList.add('green');}else{
square.classList.remove('green');
square.classList.add('red');}},1000);</script></body></html></pre>
Output
Moving Animation Using the setInterval() Method
In the code below, we create moving animation using the setInterval() method.
We have created the two nested div elements. The outer div has the parent id, and the inner div has the child id. We have set dimensions for both div elements and position to relative.
In JavaScript, we have initialized the left variable with 0. After that, we invoke the callback function of the setInterval() method after every 50 milliseconds.
In each interval, we change the position of the <div> element by 5px, and when the left position becomes 450px, we stop the animation.
Example
<html><head><style>
#parent {
position: relative;
height:50px;
width:500px;
background-color: yellow;}
#child {
position: relative;
height:50px;
width:50px;
background-color: red;}</style></head><body><div id ="parent"><div id ="child"></div></div><script>let child = document.getElementById('child');let left =0;// Moving animation using the setInterval() methodsetInterval(()=>{if(left <450){
left +=5;
child.style.left = left +'px';}},50);</script></body></html></pre>
Output
You can also use the setInterval() method to run the particular code asynchronously.
In JavaScript, the setTimeout() is a global method that allows you to execute the function or a particular JavaScript code only once after a specified time.
The window object contains the setTimeout() method. You may use the window object to execute the setTimeout() method.
The setTimeout() method can also be used to manipulate the DOM elements after the specified time of the user interaction.
Syntax
The syntax of the setTimeout() method in JavaScript is as follows −
The setTimeout() method takes at least 2 parameters.
Parameters
Callback − It is a callback function that will be called after a specific time. You can pass the arrow function, function expression, or regular expression as a value of this parameter.
delay − It is the number of milliseconds after that the callback function should be called. Here, 1 second is equal to 1000 milliseconds.
param1, param2, …, paramN − They are optional parameters to be passed as a callback function parameter.
Return Value
It returns the numeric id, which you can use to clear timeout.
Example
In the below code, we have defined the timeout() function, printing the message in the web page.
We passed the timeout() function as the first argument of the setTimeout() method, and 1000 milliseconds as a second argument.
The setTimeout() method will invoke the timeout() function after 1 second or 1000 milliseconds.
<html><body><div id ="output"></div><script>
document.getElementById('output').innerHTML ="Wait for a message! <br>";setTimeout(timeout,1000);functiontimeout(){
document.getElementById('output').innerHTML +="This message is printed after 1 second!";}</script></body></html></pre>
Output
Wait for a message!
This message is printed after 1 second!
Arrow Function with setTimeout() Method
In the below code, we have passed the arrow function as the first argument of the setTimeout() method. It works the same as passing the function name as an argument and defining the function outside.
It prints the message after 2000 milliseconds.
Example
<html><body><div id ="output"></div><script>
document.getElementById('output').innerHTML +="You will see the message after 2000 milliseconds! <br>";setTimeout(()=>{
document.getElementById('output').innerHTML +='Hi! How are you?';},2000);</script></body></html></pre>
Output
You will see the message after 2000 milliseconds!
Hi! How are you?
Passing More than 2 Arguments to setTimeout() Method
You can pass more than 2 arguments to the setTimeout() method. The first argument is a callback function, the second argument is a delay in the milliseconds, and other arguments to pass to the function parameter.
In the code below, we have passed 5 arguments to the setTimeout() method. In the sum() function, we received the last 3 arguments of the seetTimeOut() method as a parameter and summed them.
Example
<html><body><div>Wait for a sum of3 number.!</div><div id ="output"></div><script>setTimeout(sum,1000,10,20,30);functionsum(num1, num2, num3){let result = num1 + num2 + num3;
We created the counter using the setTimeout() method in the code below.
We have defined the global variable p for the counter. In the counter() function, we print the counter value and use the setTimeout() method to call the counter function again after 1000 milliseconds.
Example
<html><body><div id ="output"></div><script>let output = document.getElementById('output');
output.innerHTML +="The output of the counter is given below. <br>";var p =0;functioncounter(){
output.innerHTML +="count is - "+ p +".<br>";setTimeout(counter,1000);
p++;}counter();</script></body></html></pre>
Output
The output of the counter is given below.
count is - 0.
count is - 1.
count is - 2.
count is - 3.
count is - 4.
count is - 5.
count is - 6.
JavaScript clearTimeout() Method
Sometimes, developers are required to cancel the time out before it executes the function or the JavaScript code. In such cases, you can use the clearTimeout() method.
Syntax
You can follow the syntax below to use the clearTimeout() method.
clearTimeout(id);
Parameters
id − It is an id returned by the setTimeout() method to cancel it.
Example
In the below code, we have defined the startTimeOut() and stopTimeOut() functions, which will be called when users press the respective buttons.
In the startTimeOut() function, we set the timeout of the 3 seconds and store the id returned by the setTimeout() method into the timeOut variable.
In the stopTimeOut() function, we use the clearTimeout() method and pass the timeOut as an argument to clear the timeout.
<html><body><p>Click the Stop timeout button within 3 seconds after pressing the Start timeout button.</p><button onclick ="startTimeOut()">Start Timeout</button><button onclick ="stopTimeOut()">Stop Timeout</button><p id ="output"></p><script>let output = document.getElementById('output');let timeout;functionstartTimeOut(){
timeout =setTimeout(()=>{
output.innerHTML ="Timeout is done";},3000);}functionstopTimeOut(){clearTimeout(timeout);
output.innerHTML ="Timeout is stopped";}</script></body></html></pre>
Output
Zero Delay SetTimeout
The zero delay timeout means you call the setTimeout() method by passing the 0 milliseconds as an argument.
As you pass the 0 milliseconds as an argument, it may or may not call the JavaScript code written into the callback function after 0 milliseconds. It totally depends on the pending tasks in the queue. Once the queue of tasks is completed, it will execute the code of the callback function.
Now, the question is, what is the need of the zero delay timeout?
Sometimes, you need to execute the particular JavaScript code as soon as possible once the script gets loaded into the browser. In such cases, you can use the setTimeout() method by passing 0 milliseconds as a second argument.
Syntax
Follow the syntax below to use the zero-delay timeout.
setTimeout(callback,0);
In the above syntax, we have passed the callback function as the first parameter and 0 milliseconds as the second parameter.
Example
In the code below, we add a start message, zero delay timeout message, and end message to the web page.
In the output, you can see that it prints the start message. After that, it prints the end message and the zero delay timeout message. So, it executes the zero delay timeout code when the whole script gets loaded in the browser.
<html><body><div id ="output"></div><script>let output = document.getElementById('output');
output.innerHTML +="The code execution started. <br>";setTimeout(function(){
output.innerHTML +="Inside the zero delay timeout. <br>";},0);
output.innerHTML +="The code execution ended. <br>";</script></body></html></pre>
Output
The code execution started.
The code execution ended.
Inside the zero delay timeout.
You can also recursively use the setTimeout() method, as shown in the example of the counter. Furthermore, you can also pass the anonymous function expression as a first parameter, like the arrow function. If you want to execute the particular JavaScript code, you can use the zero delay timeout once the whole script gets executed.
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.
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></pre>
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 −
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.
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></pre>
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></pre>
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></pre>
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></pre>
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></pre>
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></pre>
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></pre>
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
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></pre>
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.
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></pre>
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></pre>
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");
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.
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.
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></pre>
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;
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;
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></pre>
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></pre>
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
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>');}});
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>');}});
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></pre>
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!");});
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.
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></pre>
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).
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></pre>
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></pre>
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></pre>
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></pre>
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></pre>
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></pre>
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){
