{"id":19066,"date":"2017-11-06T12:15:42","date_gmt":"2017-11-06T10:15:42","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=19066"},"modified":"2017-11-03T11:32:22","modified_gmt":"2017-11-03T09:32:22","slug":"demystifying-concepts-asynchronous-javascript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/","title":{"rendered":"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019"},"content":{"rendered":"<p>Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is developed now is web-based, and when it comes to accessing the application through the web browser, you got to depend on javascript.<\/p>\n<p>So, this blog is basically about breaking down the concepts of <code>asynchronous requests<\/code> in javascript which plays a vital role in how javascript functions. As we all know that javascript is single threaded, so definitely if we are to use <code>synchronous<\/code> calls for each and every action in the browser, then the browser must halt the rendering of the page in order to complete the execution of the javascript code. When the browser encounters <code>synchronous<\/code> javascript tag, it blocks the page from rendering until the code execution completes. Modern websites have moved from this method because it presents a direct risk to delaying page load time. The downside associated with this method is that the entire site is blocked from loading until the\u00a0tag fully loads.<\/p>\n<p>This can considerably slow response time associated with vendors, slow internet traffic etc. Now for the seamless experience of processing requests and rendering the page content in a web view, you have to depend upon asynchronous calls. This would not only separate javascript tags but also load them independently from each other. The <code>asynchronous<\/code> request minimises the impact of loading external javascript files on the page rendering process.<\/p>\n<h2>Functioning of Call Stack in Javascript<\/h2>\n<p>Javascript is a single threaded programming language, which means it has a single <code>call stack<\/code>\u00a0and it can serve only one request at a time. Let us consider the following codebase<\/p>\n<pre class=\"brush:js\">function multiply(a,b){\r\n return a*b;\r\n}\r\n\r\nfunction square(n){\r\n return multiply(n,n);\r\n}\r\n\r\nfunction printSquare(n){\r\n var lets_square = square(n);\r\n console.log(lets_square);\r\n}\r\n\r\nprintSquare(4);<\/pre>\n<p>So, if we analyze the code I have three functions. The first function would <code>multiply<\/code> two numbers. The second function calls the <code>multiply<\/code> function and the third function calles the <code>square<\/code> function followed by a <code>console.log<\/code>.<\/p>\n<p><strong>Quick Fact<\/strong>: So, the <code>call stack<\/code>\u00a0is basically the data structure which records where in the program we are. When we step into a function we push something onto the stack, when we return something from the function we pop up from the top of the stack. The objects that gets pushed in the call stack are referred to as <code>stack frames<\/code>. So each of the function within the call stack occupies a single <code>stack frame<\/code>.<\/p>\n<p>So, if we follow the above codebase, diagramatically it can be represented as follows. When a function is called, it is pushed on to the stack. When the function returns a value, it is popped out from the stack.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/untitled-diagram.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19069\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/untitled-diagram.jpg\" alt=\"\" width=\"676\" height=\"194\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/untitled-diagram.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/untitled-diagram-300x86.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>So, the above diagram is a visual representation of how does javascript store elements within the\u00a0<code>call stack<\/code>.<\/p>\n<h2>How does asynchronous javascript function work?<\/h2>\n<p>Now let us understand how is asynchronous javascript functioning. Let us look at a diagram first, which will clarify the interaction between the <code>js runtime engine<\/code>, <code>Web APIs<\/code> <code>task queue<\/code>and the <code>event loop<\/code>.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/js_runtime.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19070\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/js_runtime.png\" alt=\"\" width=\"676\" height=\"635\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/js_runtime.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/js_runtime-300x282.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>The js runtime engine consists of the<\/p>\n<ol>\n<li>The <code>Heap<\/code>\u00a0which basically takes care of the memory allocation.<\/li>\n<li>The <code>Call Stack<\/code>\u00a0which consists of all the javascript function.<\/li>\n<li>The <code>Web APIs<\/code>\u00a0are threads provided by browsers that can only be requested for performing specific asynchronous operations.<\/li>\n<li>The <code>Task Queue<\/code>\u00a0or the <code>Callback Queue<\/code>\u00a0which consists of the event callbacks or tasks and<\/li>\n<li>The <code>Event Loop<\/code>\u00a0which is responsible in transferring the tasks to be executed from the <code>Task Queue<\/code>\u00a0to the <code>Call Stack<\/code>\u00a0when the stack is empty.<\/li>\n<\/ol>\n<p>Let us consider a small code snippet to understand how is the asynchronous request is processed in the back end.<\/p>\n<pre class=\"brush:js\">console.log(\"Hi\");\r\n\r\nsetTimeout(function cb(){\r\nconsole.log('There');\r\n}, 5000);\r\n\r\nconsole.log(\"Christmas is just after one month\");<\/pre>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/1.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19071\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/1.jpg\" alt=\"\" width=\"676\" height=\"478\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/1.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/1-300x212.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a>The first function to be called in the stack is <code>console.log(\"Hi\");<\/code>. We get \u2018Hi\u2019 in the console.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/2.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19072\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/2.jpg\" alt=\"\" width=\"676\" height=\"478\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/2.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/2-300x212.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>Next, the <code>setTimeout(cb)<\/code>\u00a0is called to the stack. We pass the callback function and the timer to the setTimeout function. Now, remember\u00a0the <code>setTimeout<\/code>\u00a0is an API provided by the browser. Now, the browser is going to handle the timer specified in the code. The function call for <code>setTimeout<\/code> is complete so we can pop it out of the stack.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/4.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19073\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/4.jpg\" alt=\"\" width=\"676\" height=\"468\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/4.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/4-300x208.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>So, we have the timer in the Web API, which is going to complete after 5 seconds. Now the Web API cannot just start to modify the code otherwise, it would start appearing randomly. That is when the <code>Task Queue<\/code>\u00a0or the <code>Callback Queue<\/code>\u00a0kicks in.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/3.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19074\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/3.jpg\" alt=\"\" width=\"676\" height=\"468\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/3.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/3-300x208.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>Once the Web APIs are done, the callback gets pushed to the task queue, and finally we have the <code>Event Loop<\/code>.\u00a0<code>Event Loop<\/code>\u00a0is the simplest little piece in this whole equation and it has only one very simple job. It checks out the <code>Call Stack<\/code>\u00a0and the <code>Task Queue<\/code>, if the <code>Call Stack<\/code>\u00a0is empty it takes the first object in the <code>Task Queue<\/code>\u00a0and pushes it onto the <code>Call Stack<\/code>\u00a0which effectively runs it.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/5-2.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19075\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/5-2.jpg\" alt=\"\" width=\"676\" height=\"468\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/5-2.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/5-2-300x208.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/6.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-19076\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/6.jpg\" alt=\"\" width=\"676\" height=\"468\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/6.jpg 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/6-300x208.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a>\u00a0Therefore, asynchronous javascript plays a very important role in the proper processing of the events and the callbacks. Without it, the rendering of contents within the pages become quite difficult and takes quite a toll on the performance and the response time for an application.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Soumyajit Basu, partner at our <a href=\"http:\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"https:\/\/soumyajit2016.wordpress.com\/2017\/11\/02\/demystifying-the-concepts-of-asynchronous-javascript\/\" target=\"_blank\" rel=\"noopener\">Demystifying the concepts of \u2018Asynchronous JavaScript\u2019<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is developed now is web-based, and when it comes to accessing the application through the web browser, you got to depend on javascript. So, this blog is basically about breaking down the concepts of &hellip;<\/p>\n","protected":false},"author":1029,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-19066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Demystifying the concepts of \u2018Asynchronous JavaScript\u2019 - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019 - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/soumyajit.basu\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-06T10:15:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Soumyajit Basu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SoumyajitBasu19\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Soumyajit Basu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\"},\"author\":{\"name\":\"Soumyajit Basu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c2aa0b158203f117998917927a96c276\"},\"headline\":\"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019\",\"datePublished\":\"2017-11-06T10:15:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\"},\"wordCount\":811,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\",\"name\":\"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019 - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2017-11-06T10:15:42+00:00\",\"description\":\"Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c2aa0b158203f117998917927a96c276\",\"name\":\"Soumyajit Basu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca834774616f992a60dd418c3424f7d678f645d0974d880abe735f481c8b1407?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca834774616f992a60dd418c3424f7d678f645d0974d880abe735f481c8b1407?s=96&d=mm&r=g\",\"caption\":\"Soumyajit Basu\"},\"description\":\"Soumyajit is a QA\/DevOps engineer by profession and a technology enthusiast by passion. He loves communicating about technology and is an author at his own blog platform as well as in Dzone and Web Code Geeks.\",\"sameAs\":[\"https:\/\/soumyajit2016.wordpress.com\/\",\"https:\/\/www.facebook.com\/soumyajit.basu\",\"https:\/\/www.linkedin.com\/in\/soumyajit-basu-5a783886\/\",\"https:\/\/x.com\/SoumyajitBasu19\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/soumyajit-basu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019 - Web Code Geeks - 2026","description":"Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019 - Web Code Geeks - 2026","og_description":"Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/soumyajit.basu","article_published_time":"2017-11-06T10:15:42+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Soumyajit Basu","twitter_card":"summary_large_image","twitter_creator":"@SoumyajitBasu19","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Soumyajit Basu","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/"},"author":{"name":"Soumyajit Basu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c2aa0b158203f117998917927a96c276"},"headline":"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019","datePublished":"2017-11-06T10:15:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/"},"wordCount":811,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/","name":"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019 - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2017-11-06T10:15:42+00:00","description":"Javascript has been one of the vital constituents for application development nowadays in the world of information technology. Every application that is","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/demystifying-concepts-asynchronous-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Demystifying the concepts of \u2018Asynchronous JavaScript\u2019"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c2aa0b158203f117998917927a96c276","name":"Soumyajit Basu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca834774616f992a60dd418c3424f7d678f645d0974d880abe735f481c8b1407?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca834774616f992a60dd418c3424f7d678f645d0974d880abe735f481c8b1407?s=96&d=mm&r=g","caption":"Soumyajit Basu"},"description":"Soumyajit is a QA\/DevOps engineer by profession and a technology enthusiast by passion. He loves communicating about technology and is an author at his own blog platform as well as in Dzone and Web Code Geeks.","sameAs":["https:\/\/soumyajit2016.wordpress.com\/","https:\/\/www.facebook.com\/soumyajit.basu","https:\/\/www.linkedin.com\/in\/soumyajit-basu-5a783886\/","https:\/\/x.com\/SoumyajitBasu19"],"url":"https:\/\/www.webcodegeeks.com\/author\/soumyajit-basu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/1029"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19066"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19066\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}