{"id":1469,"date":"2021-11-04T06:57:10","date_gmt":"2021-11-04T06:57:10","guid":{"rendered":"https:\/\/usemynotes.com\/?p=1469"},"modified":"2023-07-17T16:19:37","modified_gmt":"2023-07-17T16:19:37","slug":"async-and-await-in-javascript","status":"publish","type":"post","link":"https:\/\/usemynotes.com\/async-and-await-in-javascript\/","title":{"rendered":"Async and Await in JavaScript"},"content":{"rendered":"<p>Hi everyone, welcome back. In this module, I will be discussing <strong>Async and Await in JavaScript<\/strong>. If you want to know about what are promises in JavaScript, then you can refer to our previous module in which I have discussed it. So, let\u2019s get started to know Async and Await in JavaScript.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1471 size-full\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript.png\" alt=\"Async and Await in JavaScript\" width=\"1000\" height=\"700\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript.png 1000w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript-300x210.png 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript-768x538.png 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript-150x105.png 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript-696x487.png 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript-600x420.png 600w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/11\/async-await-in-javascript-100x70.png 100w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/usemynotes.com\/async-and-await-in-javascript\/#Async_and_Await_in_JavaScript\" >Async and Await in JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/usemynotes.com\/async-and-await-in-javascript\/#Async_keyword_in_JavaScript\" >Async keyword in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/usemynotes.com\/async-and-await-in-javascript\/#Async_Function_Expression_in_JavaScript\" >Async Function Expression in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/usemynotes.com\/async-and-await-in-javascript\/#Async_Arrow_Function_in_JavaScript\" >Async Arrow Function in JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/usemynotes.com\/async-and-await-in-javascript\/#Await_keyword_in_JavaScript\" >Await keyword in JavaScript<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Async_and_Await_in_JavaScript\"><\/span><strong>Async and Await in JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In JavaScript, async &amp; await is an extension of promise. It is used for making promises easier to write. It was introduced in ECMAScript 2017 or ES8. The async &amp; await act as syntactic sugar on top of promises. They make the <a href=\"https:\/\/usemynotes.com\/javascript\/\">JavaScript<\/a> code appear to be synchronous, but it&#8217;s asynchronous and non-blocking.<\/p>\n<p>Using async\/await, debugging JavaScript code becomes easier compared to <a href=\"https:\/\/usemynotes.com\/promises-in-javascript\/\">promises<\/a> because it seems like synchronous code, but in reality, it\u2019s an asynchronous code. The browsers that async\/await are Google Chrome 55, Microsoft Edge 15, Mozilla Firefox 52, Safari 11 &amp; Opera 42.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Async_keyword_in_JavaScript\"><\/span>Async keyword in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The keyword &#8220;async&#8221; is used before the function keyword when defining a function and making a function always returns a promise on execution. Let\u2019s see a syntax &amp; one example to understand it better.<\/p>\n<p><strong>Syntax<\/strong><br \/>\nasync function function_name()<br \/>\n{<br \/>\n\/\/ body of function<br \/>\n}<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h1&gt; Async\/Await in JavaScript &lt;\/h1&gt;\r\n&lt;script&gt;\r\n  async function fun() {\r\n    return &quot;Async keyword&quot;;\r\n  }\r\n\r\n\/\/ OR\r\n\r\nasync function fun() {\r\n  return Promise.resolve(&quot;Async keyword&quot;);\r\n}\r\n\r\nconsole.log(fun());\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>We can capture the promise and extract value from it in the above code since the value returned is a promise. Using &#8220;then&#8221;, we may attach a callback function with the promise.<br \/>\nFor example,<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h1&gt; Async and Await in JavaScript &lt;\/h1&gt;\r\n&lt;script&gt;\r\n  async function fun() {\r\n    return &quot;Async keyword&quot;;\r\n  }\r\n\r\nfun().then((data) =&gt; {\r\n  console.log(data)\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Async_Function_Expression_in_JavaScript\"><\/span>Async Function Expression in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Syntax<\/strong><br \/>\nlet function_name = async function(){<br \/>\n\/\/ body of function<br \/>\n}<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h2&gt; Async and Await in JavaScript &lt;\/h2&gt;\r\n&lt;script&gt;\r\nlet fun = async function(){\r\n  return &quot;Async Function Expression&quot;;\r\n}\r\n\r\nfun();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Async_Arrow_Function_in_JavaScript\"><\/span>Async Arrow Function in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Syntax<\/strong><br \/>\nlet function_name = async () =&gt; {<br \/>\n\/\/ body of function<br \/>\n}<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h1&gt; Async and Await in JavaScript &lt;\/h1&gt;\r\n&lt;script&gt;\r\nlet fun = async()=&gt;{\r\n  return &quot;Async Arrow Function&quot;;\r\n}\r\n\r\nfun();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Await_keyword_in_JavaScript\"><\/span>Await keyword in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The keyword \u201cawait\u201d is used before a function, which makes a function wait for a promise to return a value. We can only use await inside the async function.<\/p>\n<p><strong>Syntax<\/strong><br \/>\nlet value = await promise;<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h1&gt; Async and Await in JavaScript &lt;\/h1&gt;\r\n  &lt;h2 id=&#039;message&#039;&gt;&lt;\/h2&gt;\r\n&lt;script&gt;\r\nasync function fun() \r\n{\r\n  var promise1 = new Promise(function(Res, Rej){\r\n  Res(&quot;Hello, World!!&quot;);\r\n});\r\ndocument.getElementById(&quot;message&quot;).innerHTM = await promise1;\r\n}\r\n\r\nfun();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>There would be a syntax issue if we tried to use await keyword in a non-async function or regular function. For example,<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h2&gt; Async and Await in JavaScript &lt;\/h2&gt;\r\n&lt;script&gt;\r\nfunction fun() {\r\n  let promise = Promise.resolve(&#039;Hello, World!!!&#039;);\r\n  let result = await promise; \r\n  \/\/ SyntaxError: await is only valid in async functions.\r\n}\r\n\r\nfun();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>When the <strong>Await and Async keywords<\/strong> are used together, the main thread will not continue to execute further until the asynchronous portion of the application has been completed, giving the thread synchronous behavior. Thus, Await and Async in JavaScript have introduced synchronous behavior to the Execution.<\/p>\n<p>I hope this module will be beneficial &amp; now you have got some basic knowledge of <strong>Async and Await in JavaScript<\/strong>. In the beginning, it will take some time for you to understand it properly, but by practicing it, you will get to know about it. In the next module, I will be discussing Destructuring in JavaScript. You can refer to our website for other exciting &amp; valuable modules like this.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi everyone, welcome back. In this module, I will be discussing Async and Await in JavaScript. If you want to know about what are promises in JavaScript, then you can refer to our previous module in which I have discussed it. So, let\u2019s get started to know Async and Await in JavaScript. Async and Await [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":{"0":"post-1469","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"_links":{"self":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/comments?post=1469"}],"version-history":[{"count":0,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1469\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media\/1471"}],"wp:attachment":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media?parent=1469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/categories?post=1469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/tags?post=1469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}