Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. In other words, if your program is running a particularly long task, asynchronous coding allows you to work on other tasks while that code is running. <\/p>\n\n\n\n
Code Institute graduate Guillermo Brachetta explains Asynchronous JavaScript with some intriguing examples in this article. <\/p>\n\n\n\n
It’s 9 in the morning, and Hugo’s day has just started.<\/p>\n\n\n\n
Like any other day, the first thing Hugo does is get some coffee, so he approaches the machine, makes a choice (double espresso) and waits. Someone says ‘good morning’, but he doesn’t hear them straight away. He only realizes once the coffee is ready (it takes a minute or two) and replays their words back. Hugo grabs his cup and goes to his desk to start his computer. Hugo stares at the screen: he is strangely fascinated by that black rectangle coming to life. He particularly enjoys the progress bar reaching the end.<\/p>\n\n\n\n
There’s a message from his boss: Hugo needs to print a long document and get it signed by the client by the end of the day. So he presses the button and waits for the documents to be all out of the printer.<\/p>\n\n\n\n
Hugo writes an email to their client asking what would be a suitable time to sign the papers. He sends it and waits. Finally, after two hours, a reply comes in, and he eagerly reads the email: the signature can take place by the end of the day, so he sits back, relaxes, and waits.<\/p>\n\n\n\n
Fabio works at Hugo’s competitor company, and they have a similar routine. Fabio also likes coffee and goes every morning to the machine. While he waits for his coffee to be ready, he catches up with colleagues. Back to his desk, he turns his computer on, and while it starts, he gives his boss a call regarding the contract they need to finalize today. His boss gives him a couple of straightforward instructions and raises a point or two. His computer is finally on, and they can discuss details by looking at the email from the client. Fabio quickly adjusts the contract while on the phone. By the time the conversation is over, the document has already been sent to the printer to be signed.<\/p>\n\n\n\n
Fabio then emails the client asking for a good moment to get the contract signed, and immediately after starts to fill in the gaps from another document that needs attention. There’s a long day ahead, and he’s counting on closing a few important deals, but it all looks good, and it’s only 9:30.<\/p>\n\n\n\n
As we’ve seen at Hugo’s office, every action happens in succession, and Hugo needs to wait for each of them to be completed before he can do anything else. Or even worse: Hugo could be sending an empty envelope to his client if he doesn’t let the contract be out of the printer first. This is synchronous code, and the problem is apparent: there’s code running that is blocking the execution of the rest of it until the resources are free, or comes in an undesired order, or creates an error.<\/p>\n\n\n\n
JavaScript is very fast, but some actions require time, no matter how little. Think, for example, of a request to a database that may take some time or even a complex mathematical calculation; synchronous code execution will at least block the rest of the code or break it.<\/p>\n\n\n\n
This is an example of synchronous code<\/p>\n\n\n\n
<pre><code class="lang-js">const showGreeting = <span class="hljs-function"><span class="hljs-params">(content)<\/span> =><\/span> {\n <span class="hljs-built_in">console<\/span>.log(content);\n}\n\nconst runMeFirst = <span class="hljs-function"><span class="hljs-params">()<\/span> =><\/span> {\n showGreeting(<span class="hljs-string">"Hello"<\/span>);\n}\n\nconst runMeNext = <span class="hljs-function"><span class="hljs-params">()<\/span> =><\/span> {\n showGreeting(<span class="hljs-string">"World!"<\/span>);\n}\n\nrunMeFirst();\nrunMeNext();\n<\/code><\/pre><\/code><\/pre><\/div>\n\n\n\nThe code above will print in the console<\/p>\n\n\n\n
Hello\nWorld!<\/code><\/pre><\/div>\n\n\n\nBecause the functions are executed in the order specified, and they take very negligible time. But let\u2019s now imagine that the first function takes some longer time, say it is a request to fetch some data from a database. We will simulate an asynchronous request that needs time to yield a result by adding a setTimeout<\/code> function with a duration of 1 second (1000 milliseconds).<\/p>\n\n\n\nconst showGreeting = (content) => {\n console.log(content);\n};\n\nconst runMeFirst = () => {\n setTimeout(() => {\n showGreeting('Hello');\n }, 1000);\n};\n\nconst runMeNext = () => {\n showGreeting('World!');\n};\n\nrunMeFirst();\nrunMeNext();<\/code><\/pre><\/div>\n\n\n\nWhen we execute them, the result, in this case, will be<\/p>\n\n\n\n
World!\nHello<\/code><\/pre><\/div>\n\n\n\nAnd that’s certainly not what we want. Instead, we want our mock asynchronous function to run in the correct order.<\/p>\n\n\n\n
How can we fix this?<\/p>\n\n\n\n
Asynchronous Execution<\/strong><\/h2>\n\n\n\nThere are three ways to run code asynchronously:<\/p>\n\n\n\n
- Callback functions<\/li>
- Promises (ES6)<\/li>
- Async\/Await (ES8)<\/li><\/ul>\n\n\n\n
Callback Functions<\/strong><\/h3>\n\n\n\nCallbacks are the original way JavaScript used to run code asynchronously. It basically is a function that is passed as a parameter to another function and is executed when the previous one has finished.<\/p>\n\n\n\n
For our code above, this is an implementation of asynchronously running the code above:<\/p>\n\n\n\n
const showGreeting = (content) => {\n console.log(content);\n};\n\nconst runMeFirst = (callback) => {\n setTimeout(() => {\n showGreeting('Hello');\n callback();\n }, 1000);\n};\n\nconst runMeNext = () => {\n showGreeting('World!');\n};\n\nrunMeFirst(runMeNext);<\/code><\/pre><\/div>\n\n\n\nIn it, the runMeFirst<\/code> function is passed a callback function as a parameter. This callback function, runMeNext<\/code>, is executed when the first function has finished.<\/p>\n\n\n\nWhile this works perfectly well, it\u2019s easy to realize that this is fine in the given example, but that it becomes a lot more difficult to read and maintain as soon as the code gets bigger, and we need to deal with more complex scenarios and multiple asynchronous functions. It is a very common pattern to see nested callbacks deepened into the call, with the last callback being the one that is executed when all the previous ones have finished. This can become what\u2019s commonly called callback <\/code>hell, when a succession of callbacks functions end up being nested inside each other, making the code awkwardly confusing.<\/p>\n\n\n\nLuckily, there came a solution to this problem: the Promise<\/code> object.<\/p>\n\n\n\nPromises<\/strong><\/h3>\n\n\n\nPromises were first introduced with ES6 in 2015, and they are a way to handle asynchronous code in a way that is more readable and easier to use.<\/p>\n\n\n\n
A promise<\/code> is an object that represents the eventual completion or failure of an asynchronous operation<\/strong> or, in other words, it is an object that represents an operation that hasn’t been completed yet.<\/p>\n\n\n\nA promise is in one of the following states:<\/p>\n\n\n\n
- Pending: its initial state, neither fulfilled nor rejected.<\/li>
- Fulfilled: when the operation has completed successfully.<\/li>
- Rejected: when the operation failed.<\/li><\/ul>\n\n\n\n
A promise in a pending<\/code> state is said to be unresolved<\/strong>, and we need to wait for it to be either resolved or rejected before we can do anything with it.<\/p>\n\n\n\nLet\u2019s assume that the timeout function returns a promise, for example, let\u2019s imagine that it\u2019s a request to fetch some data from a remote server. We will mock the time it takes for the promise to resolve by using that setTimeout() that takes 1 second, and we will use the Promise<\/code> constructor with our setTimeout() in order to simulate that fetch request that needs some time to complete.<\/p>\n\n\n\nconst runMeFirst = () => new Promise((resolve, reject) => {\n setTimeout(() => {\n showGreeting('Hello');\n\n \/\/ Error handling would be needed here.\n \/\/ For the sake of our example let's assume that the fetch request was successful.\n const error = false;\n\n if (!error) {\n \/\/ If there's no error we resolve the promise.\n resolve();\n } else {\n \/\/ If there's an error we reject it and handle the error.\n reject(new Error('Something went wrong'));\n }\n }, 1000);\n});<\/code><\/pre><\/div>\n\n\n\nNow let\u2019s incorporate our new function into our code:<\/p>\n\n\n\n
const showGreeting = (content) => {\n console.log(content);\n};\n\nconst runMeFirst = () => new Promise((resolve, reject) => {\n setTimeout(() => {\n showGreeting('Hello');\n const error = false;\n\n if (!error) {\n resolve();\n } else {\n reject(new Error('Something went wrong'));\n }\n }, 1000);\n});\n\nconst runMeNext = () => {\n showGreeting('World!');\n};\n\nrunMeFirst()\n .then(runMeNext)\n .catch((err) => console.log(err)<\/code><\/pre><\/div>\n\n\n\nAs we can see above, we deal with the promise using the .then and .catch methods, instructing our promise to run, and then execute the next function only after the first one has finished:<\/p>\n\n\n\n
runMeFirst().then(runMeNext)<\/code><\/pre><\/div>\n\n\n\nThis handles the resolve scenario (that is, if the promise was successful). We then use the .catch<\/code> method to handle the reject scenario (that is, if the promise failed).<\/p>\n\n\n\nSubsequent promises can be chained together, for example:<\/p>\n\n\n\n
runMeFirst()\n .then(runMeNext)\n .then(oneMorePromise)\n .then(yetAnotherPromise)\n .catch((err) => console.log(err));<\/code><\/pre><\/div>\n\n\n\nAnother way to handle a series of chained promises is using the Promise.all<\/code> method. This method takes an array of promises as a parameter and returns a new promise that is resolved when all the promises in the array have resolved, or it is rejected when any<\/strong> of the promises in the array have been rejected, and the error is passed to the catch<\/code> method of the only .then()<\/code> method of the returned promise:<\/p>\n\n\n\nPromise.all([runMeFirst, runMeNext, oneMorePromise, yetAnotherPromise]).then((values) => {\n console.log(values) \/\/ Handle resolved values here.\n}).catch((err) => console.log(err)); \/\/ Handle rejected values here.<\/code><\/pre><\/div>\n\n\n\nAsync\/Await<\/strong><\/h3>\n\n\n\nA newer way to handle asynchronous code was made available with the introduction of the async<\/code> and await<\/code> keywords in ES8 (or ES2017).<\/p>\n\n\n\nThese new keywords make it even easier to read, write and understand asynchronous code, turning the series of chained .then()<\/code> and .catch()<\/code> calls into a very natural, human-readable format.<\/p>\n\n\n\nIn order to deal with a promise in this way, we need to use the async<\/code> keyword in the function and await<\/code> for the result of the promise.<\/p>\n\n\n\nLet\u2019s create a new function, which we\u2019ll call init<\/code> for this example, that uses the async<\/code> keyword:<\/p>\n\n\n\nconst init = async () => {\n await runMeFirst();\n runMeNext();\n};<\/code><\/pre><\/div>\n\n\n\nIt reads very similar to the way we talk, and it\u2019s immediately clear what we are expecting to happen:<\/p>\n\n\n\n
- We know that our function is going to deal with asynchronous code by the use of the async keyword.<\/li>
- We can immediately see that it is going to deal with a promise, so we need to use the human-readable await keyword (in other words, when we see await before a function we can be sure we are expecting a promise to be returned).<\/li>
- The following function is synchronous, and thus it doesn\u2019t need to be preceded by any keyword.<\/li><\/ul>\n\n\n\n
Our previous example can then be rewritten as:<\/p>\n\n\n\n
const showGreeting = (content) => {\n console.log(content);\n};\n\n\/\/ The function returns a promise.\nconst runMeFirst = () =>\n new Promise((resolve, reject) => {\n setTimeout(() => {\n showGreeting('Hello');\n const error = false;\n\n if (!error) {\n resolve();\n } else {\n reject(new Error('Something went wrong'));\n }\n }, 1000);\n });\n\n\/\/ The synchronous function.\nconst runMeNext = () => {\n showGreeting('World!');\n};\n\n\/\/ The new asynchronous function using async\/await.\nconst init = async () => {\n await runMeFirst();\n runMeNext();\n};\n\n\/\/ Call the new asynchronous function.\ninit();<\/code><\/pre><\/div>\n\n\n\nSo, even though JavaScript is a single-threaded language, we can still make it work as if it was capable of \u2018multitasking\u2019 thanks to its asynchronous capabilities, made very accessible by the introduction of promises with ES6 and easy to read by the incorporation of the async<\/code> and await<\/code> keywords with ES8.<\/p>\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\nAsynchronous JavaScript unleashes the full power the language has to offer, and the relatively recent introduction of progressive ways to use it makes us be sure of the health and future of JavaScript.<\/p>\n\n\n\n
Modern frameworks such as React, Next.js and Vue make extensive use of the power of asynchronous code. They are tremendously popular and powerful, and the steady growth and refinement of these and new libraries and frameworks is a clear indication of the exciting potential<\/a> JavaScript has yet to offer for a long time ahead.<\/p>\n\n\n\nGuillermo Brachetta, Code Institute Graduat<\/em>e<\/p>\n\n\n\nLearn some coding basics for free<\/h2>\n\n\n\n
If you want to learn some of the basics of JavaScript for free, try this free 5 Day Coding Challenge<\/a>. On it, you will learn the basics of HTML<\/a>, CSS<\/a> and JavaScript. It takes just one hour a day over five days. Register now through the form below. Alternatively, if you want to learn full-stack software development, you can read more about our programme here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. In other words, if your program is running a particularly long task, asynchronous coding allows you to work on other tasks while that code is running. Code Institute graduate Guillermo Brachetta explains Asynchronous JavaScript with some intriguing […]<\/p>\n","protected":false},"author":18,"featured_media":112914,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9,21],"tags":[153,109],"class_list":["post-112904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-javascript","tag-javascript","tag-technology"],"acf":[],"yoast_head":"\n
What is Asynchronous Javascript? - Code Institute Global<\/title>\n<meta name=\"description\" content=\"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. We discuss.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Asynchronous Javascript? - Code Institute Global\" \/>\n<meta property=\"og:description\" content=\"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. We discuss.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Institute Global\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-13T09:24:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript.png.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Guest Author\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript.png.webp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Guest Author\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/\"},\"author\":{\"name\":\"Guest Author\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#\\\/schema\\\/person\\\/59a8fa654948023b958f9dba01fb87e7\"},\"headline\":\"What is Asynchronous Javascript?\",\"datePublished\":\"2022-06-13T09:24:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/\"},\"wordCount\":1684,\"publisher\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3m1rm8xuevz4q.cloudfront.net\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Asynchronous-JavaScript-2.png.webp\",\"keywords\":[\"JavaScript\",\"Technology\"],\"articleSection\":[\"Coding\",\"JavaScript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/\",\"url\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/\",\"name\":\"What is Asynchronous Javascript? - Code Institute Global\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3m1rm8xuevz4q.cloudfront.net\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Asynchronous-JavaScript-2.png.webp\",\"datePublished\":\"2022-06-13T09:24:00+00:00\",\"description\":\"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. We discuss.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/d3m1rm8xuevz4q.cloudfront.net\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Asynchronous-JavaScript-2.png.webp\",\"contentUrl\":\"https:\\\/\\\/d3m1rm8xuevz4q.cloudfront.net\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Asynchronous-JavaScript-2.png.webp\",\"width\":1500,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/what-is-asynchronous-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is Asynchronous Javascript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#website\",\"url\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/\",\"name\":\"Code Institute Global\",\"description\":\"A New Career in Tech\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#organization\",\"name\":\"Code Institute Global\",\"url\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/d3m1rm8xuevz4q.cloudfront.net\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Web_grey_logo-1.png.webp\",\"contentUrl\":\"https:\\\/\\\/d3m1rm8xuevz4q.cloudfront.net\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Web_grey_logo-1.png.webp\",\"width\":251,\"height\":105,\"caption\":\"Code Institute Global\"},\"image\":{\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/#\\\/schema\\\/person\\\/59a8fa654948023b958f9dba01fb87e7\",\"name\":\"Guest Author\",\"description\":\"From time to time, students, graduates, and colleagues of Code Institute contribute to our blogs and articles. Here's where you will find them.\",\"url\":\"https:\\\/\\\/codeinstitute.net\\\/global\\\/blog\\\/author\\\/guest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Asynchronous Javascript? - Code Institute Global","description":"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. We discuss.","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:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/","og_locale":"en_US","og_type":"article","og_title":"What is Asynchronous Javascript? - Code Institute Global","og_description":"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. We discuss.","og_url":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/","og_site_name":"Code Institute Global","article_published_time":"2022-06-13T09:24:00+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript.png.webp","type":"image\/webp"}],"author":"Guest Author","twitter_card":"summary_large_image","twitter_image":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript.png.webp","twitter_misc":{"Written by":"Guest Author","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#article","isPartOf":{"@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/"},"author":{"name":"Guest Author","@id":"https:\/\/codeinstitute.net\/global\/#\/schema\/person\/59a8fa654948023b958f9dba01fb87e7"},"headline":"What is Asynchronous Javascript?","datePublished":"2022-06-13T09:24:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/"},"wordCount":1684,"publisher":{"@id":"https:\/\/codeinstitute.net\/global\/#organization"},"image":{"@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript-2.png.webp","keywords":["JavaScript","Technology"],"articleSection":["Coding","JavaScript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/","url":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/","name":"What is Asynchronous Javascript? - Code Institute Global","isPartOf":{"@id":"https:\/\/codeinstitute.net\/global\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript-2.png.webp","datePublished":"2022-06-13T09:24:00+00:00","description":"Asynchronous JavaScript is best described as being able to multitask while running one program and working on another. We discuss.","breadcrumb":{"@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#primaryimage","url":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript-2.png.webp","contentUrl":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/05\/Asynchronous-JavaScript-2.png.webp","width":1500,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/codeinstitute.net\/global\/blog\/what-is-asynchronous-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeinstitute.net\/global\/"},{"@type":"ListItem","position":2,"name":"What is Asynchronous Javascript?"}]},{"@type":"WebSite","@id":"https:\/\/codeinstitute.net\/global\/#website","url":"https:\/\/codeinstitute.net\/global\/","name":"Code Institute Global","description":"A New Career in Tech","publisher":{"@id":"https:\/\/codeinstitute.net\/global\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeinstitute.net\/global\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeinstitute.net\/global\/#organization","name":"Code Institute Global","url":"https:\/\/codeinstitute.net\/global\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeinstitute.net\/global\/#\/schema\/logo\/image\/","url":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/02\/Web_grey_logo-1.png.webp","contentUrl":"https:\/\/d3m1rm8xuevz4q.cloudfront.net\/wp-content\/uploads\/2022\/02\/Web_grey_logo-1.png.webp","width":251,"height":105,"caption":"Code Institute Global"},"image":{"@id":"https:\/\/codeinstitute.net\/global\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeinstitute.net\/global\/#\/schema\/person\/59a8fa654948023b958f9dba01fb87e7","name":"Guest Author","description":"From time to time, students, graduates, and colleagues of Code Institute contribute to our blogs and articles. Here's where you will find them.","url":"https:\/\/codeinstitute.net\/global\/blog\/author\/guest\/"}]}},"_links":{"self":[{"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/posts\/112904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/comments?post=112904"}],"version-history":[{"count":2,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/posts\/112904\/revisions"}],"predecessor-version":[{"id":112917,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/posts\/112904\/revisions\/112917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/media\/112914"}],"wp:attachment":[{"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/media?parent=112904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/categories?post=112904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinstitute.net\/global\/wp-json\/wp\/v2\/tags?post=112904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}