{"id":647,"date":"2020-08-26T18:12:24","date_gmt":"2020-08-26T18:12:24","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=647"},"modified":"2020-09-01T19:09:10","modified_gmt":"2020-09-01T19:09:10","slug":"what-is-async-await-in-javascript","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/what-is-async-await-in-javascript\/","title":{"rendered":"What is async\/await in JavaScript"},"content":{"rendered":"\n<p>The <code>async\/await<\/code> is a new feature included in ECMAScript 2017 or ES8 JavaScript edition in order to make asynchronous function calls easier and it act as syntactical sugar on top of promises. It allow us to write completely synchronous-looking code while performing asynchronous tasks behind the scenes.<\/p>\n\n\n\n<p><strong>The async Keyword:<\/strong><\/p>\n\n\n\n<p>The <strong><code>async<\/code><\/strong> is placed before a function to make it asynchronous. This means the function will always return a promise instead of returning a value directly.&nbsp; <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Async function\nasync function greet() { \n   return \"Hello world!\"\n};\ngreet();\n\/\/ Output: Hello world!<\/code><\/pre>\n\n\n\n<p>Since the <strong><code>greet<\/code><\/strong> function is returning a promise, we could use a&nbsp;<code><strong>.then()<\/strong><\/code>&nbsp;block to consume the returned value. Let&#8217;s define the same function as function expression to understand this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let greet = async function() { \n   return \"Hello world!\" \n};\ngreet().then(function(value){\n   console.log(value);\n})\n\/\/ Output: Hello world!\n\n\/\/ Using ES6 Arrow Function\ngreet().then((value) => console.log(value));\n<\/code><\/pre>\n\n\n\n<p>The code inside <strong><code>.then()<\/code><\/strong> does not get executed until the async <strong><code>greet<\/code><\/strong> function returns a value (i.e until the promise is fulfilled).<\/p>\n\n\n\n<p><strong>The await Keyword:<\/strong><\/p>\n\n\n\n<p> The keyword&nbsp;<code><strong>await<\/strong><\/code>&nbsp;makes JavaScript wait until that promise settles and returns its result. Note that <strong><code>await<\/code>&nbsp;only works inside async functions<\/strong>. This can be put before any async promise based function to pause your code on that line until the promise fulfills and a value is returned. In the meantime, rest of the code may keep waiting for a chance to get execute. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let getGreeting = async function() { \n   \/\/ You can make some API call here and return the response  \n   return \"Hello world!\" \n};\n\nasync function greet() {\n   return greeting = await getGreeting();\n};\n\ngreet().then(function(value){\n   console.log(value);\n})\n\/\/ Output: Hello world!<\/code><\/pre>\n\n\n\n<p>As you have seen in the example above, async\/await works closely together. <\/p>\n\n\n\n<p>I will discuss about <strong>promise<\/strong> in detail in an upcoming article. Thank you for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The async\/await is a new feature included in ECMAScript 2017 or ES8 JavaScript edition in order to make asynchronous function calls easier and it act as syntactical sugar on top&nbsp;[ &hellip; ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[212,210,214,213,100],"class_list":["post-647","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-async-await-how-it-works","tag-async-await-in-javascript","tag-async-wait-arrow-function","tag-async-wait-vs-promises","tag-js-interview-question","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":15,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions\/662"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}