{"id":5130,"date":"2019-01-15T20:42:28","date_gmt":"2019-01-15T19:42:28","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=5130"},"modified":"2019-01-15T10:43:11","modified_gmt":"2019-01-15T09:43:11","slug":"intuitive-asynchronous-javascript-edwin-yung-medium","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/01\/15\/intuitive-asynchronous-javascript-edwin-yung-medium\/","title":{"rendered":"Intuitive Asynchronous Javascript \u2013 Edwin Yung \u2013 Medium"},"content":{"rendered":"<blockquote><p>Escape callback hell!<\/p><\/blockquote>\n<p>Source: <em><a href=\"http:\/\/www.edwinyung.com\/2017\/12\/29\/intuitive-asynchronous-javascript\/\">Intuitive Asynchronous Javascript \u2013 Edwin Yung \u2013 Medium<\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><!--more--><!--nextpage--><\/p>\n<blockquote>\n<h1 id=\"d32a\" class=\"graf graf--h3 graf--leading graf--title\">Asynchronous Javascript Explained Simply and Intuitively<\/h1>\n<div class=\"uiScale uiScale-ui--regular uiScale-caption--regular u-flexCenter u-marginVertical24 u-fontSize15 js-postMetaLockup\">\n<div class=\"u-flex0\"><a class=\"link u-baseColor--link avatar\" dir=\"auto\" href=\"https:\/\/medium.com\/@edwinyung?source=post_header_lockup\" data-action=\"show-user-card\" data-action-source=\"post_header_lockup\" data-action-value=\"4c8a6451fa39\" data-action-type=\"hover\" data-user-id=\"4c8a6451fa39\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"avatar-image u-size50x50\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/fit\/c\/52\/52\/1%2A0nc2z8QOnIhEhhSQiIt-wA.jpeg?w=910&#038;ssl=1\" alt=\"Go to the profile of Edwin Yung\"\/><\/a><\/div>\n<div class=\"u-flex1 u-paddingLeft15 u-overflowHidden\">\n<div class=\"u-paddingBottom3\"><a class=\"ds-link ds-link--styleSubtle ui-captionStrong u-inlineBlock link link--darken link--darker\" dir=\"auto\" href=\"https:\/\/medium.com\/@edwinyung\" data-action=\"show-user-card\" data-action-value=\"4c8a6451fa39\" data-action-type=\"hover\" data-user-id=\"4c8a6451fa39\">Edwin Yung<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"ui-caption postMetaInline js-testPostMetaInlineSupplemental\"><time datetime=\"2017-12-29T11:31:17.000Z\">Dec 29, 2017<\/time><\/div>\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"0*lnhB4xd0_w8gC_XX\" data-width=\"2880\" data-height=\"1920\" data-action=\"zoom\" data-action-value=\"0*lnhB4xd0_w8gC_XX\" data-scroll=\"native\"><\/div>\n<\/div>\n<figure id=\"5f64\" class=\"graf graf--figure graf-after--h3\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"0*lnhB4xd0_w8gC_XX\" data-width=\"2880\" data-height=\"1920\" data-action=\"zoom\" data-action-value=\"0*lnhB4xd0_w8gC_XX\" data-scroll=\"native\"><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/828\/0*lnhB4xd0_w8gC_XX\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/828\/0*lnhB4xd0_w8gC_XX\"\/><\/div>\n<\/div><figcaption class=\"imageCaption\">Escape callback hell with this&nbsp;article!<\/figcaption><\/figure>\n<p id=\"e97f\" class=\"graf graf--p graf-after--figure\">Asynchronous Javascript is difficult to wrangle. The following is my quick attempt to elucidate their inner workings.<\/p>\n<p id=\"bbb2\" class=\"graf graf--p graf-after--p\">Before we get started, we need to distinguish between synchronous and asynchronous. Synchronous is defined as \u201chappening at the same time\u201d. In computing, synchronous operations happen in order, one after the other like falling dominoes. Many programming languages synchronously comb through the code. It intuitively makes sense: you expect that your code happens in the order in which it was written.<\/p>\n<pre id=\"89f7\" class=\"graf graf--pre graf-after--p\">Function1()\nFunction2()<\/pre>\n<p id=\"4f54\" class=\"graf graf--p graf-after--pre\">Synchronously, Function2() only executes upon the completion of Function1().<\/p>\n<p id=\"3e70\" class=\"graf graf--p graf-after--p\">In programming, and in life, we don\u2019t want to wait for a function to finish to be able to do something else. Imagine web browsing and waiting ten minutes for the code to finish loading before your specific action is fired. Fortunately, Javascript has asynchronous functions that allow events to happen outside the normal execution flow without blocking the whole thing. We can deal with out of sync events such as button clicks and timeouts.<\/p>\n<p id=\"e352\" class=\"graf graf--p graf-after--p\">Some functions can finish their execution faster than functions that nominally happened \u201cfirst\u201d. This sounds like it would be \u201csynchronous\u201d under our colloquial definition, but Javascript is mimicking multi-threaded operations where each function is passed to a separate \u201cthread\u201d of execution and the threads race to complete. There is no waiting around like in synchronous land. Formally, since Javascript is single-threaded, it accomplishes asynchronous functions through the event loop (see endnotes).<\/p>\n<p id=\"bb11\" class=\"graf graf--p graf-after--p\">Briefly, synchronous = \u201cblocking\u201d and asynchronous = \u201cdeferred\u201d.<\/p>\n<p id=\"2785\" class=\"graf graf--p graf-after--p\">A way to \u201csynchronize\u201d these asynchronous functions is to use a callback. A callback is a function that is passed as an argument to another function (the \u201cparent\u201d), and is executed (\u201ccall you back\u201d or \u201ccalled at the back\u201d) at a certain point during the parent function\u2019s own code runtime. Like a queue, each callback function is appended to the existing ones and popped out in First-In-First-Out (FIFO) fashion.<\/p>\n<figure id=\"1b60\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"1b60\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/416ff5bebec52736aa5da5bebc11c175?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/416ff5bebec52736aa5da5bebc11c175?postId=c76b00317464\" data-media-id=\"416ff5bebec52736aa5da5bebc11c175\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"c379\" class=\"graf graf--p graf-after--figure\">Often, multiple nested callbacks results in messy looking code (see <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/callbackhell.com\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"http:\/\/callbackhell.com\/\">callback hell<\/a>). For example, straight from the docs:<\/p>\n<figure id=\"14ac\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"14ac\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/548d51ff8d530e60edd3a6bf9a59fc7d?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/548d51ff8d530e60edd3a6bf9a59fc7d?postId=c76b00317464\" data-media-id=\"548d51ff8d530e60edd3a6bf9a59fc7d\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"f5d8\" class=\"graf graf--p graf-after--figure\">To escape callback hell, we can try modularizing our code and make more functions. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/callbackhell.com\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"http:\/\/callbackhell.com\/\">callbackhell.com<\/a> recommends this approach. I think a better way is to use an abstraction known as promises. A promise is an object that represents the future result of an asynchronous event. It\u2019s a proxy for the eventual outcome.<\/p>\n<p id=\"dec7\" class=\"graf graf--p graf-after--p\">Promises allow us to easily chain asynchronous operations in sequence and restores powerful tools that we lost when using callbacks: we can throw synchronous errors, end the chain with a catch for errors, and return additional promises or synchronous values. See the below code from the docs for an adaptation of the above code. Don\u2019t get bogged down with the exact syntax; just note the flow and differences with the above code.<\/p>\n<figure id=\"aa06\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"aa06\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/e6d45a5376df1b63e89320213e6950ff?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/e6d45a5376df1b63e89320213e6950ff?postId=c76b00317464\" data-media-id=\"e6d45a5376df1b63e89320213e6950ff\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"34b9\" class=\"graf graf--p graf-after--figure\">In Javascript, promises are created with the new Promise() keyword, which constructs a Promise object which takes a function as an argument that in turn takes two default functions as parameters: <code class=\"\" data-line=\"\">resolve<\/code> and <code class=\"\" data-line=\"\">reject<\/code>. <code class=\"\" data-line=\"\">resolve<\/code> is mandatory, and executes upon successful completion of the promise and it can take a parameter that will return as a value upon completion. <code class=\"\" data-line=\"\">reject<\/code> is optional and executes if there is an error from the promise.<\/p>\n<p id=\"943f\" class=\"graf graf--p graf-after--p\">In essence, the Promise object may be thought of something like this:<\/p>\n<figure id=\"ecde\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"ecde\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/4a2e66f57e31d5ccc7bb0a14b63f691c?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/4a2e66f57e31d5ccc7bb0a14b63f691c?postId=c76b00317464\" data-media-id=\"4a2e66f57e31d5ccc7bb0a14b63f691c\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"1755\" class=\"graf graf--p graf-after--figure\">The Promise object has a <code class=\"\" data-line=\"\">then()<\/code> method that we use to interact with the promise and chain additional promises. It takes the result of the object and returns more promises or synchronous values, or it can be used to throw synchronous errors. We can <code class=\"\" data-line=\"\">catch()<\/code> all the errors at the end without repetition.<\/p>\n<figure id=\"41ec\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"41ec\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/20b7854b0818711cd6b000d141e12e60?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/20b7854b0818711cd6b000d141e12e60?postId=c76b00317464\" data-media-id=\"20b7854b0818711cd6b000d141e12e60\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"ec4c\" class=\"graf graf--p graf-after--figure\">This is another example of using promises on an API call.<\/p>\n<figure id=\"422e\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"422e\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/d41ad91b7f2c4575319153c162262b6c?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/d41ad91b7f2c4575319153c162262b6c?postId=c76b00317464\" data-media-id=\"d41ad91b7f2c4575319153c162262b6c\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"3cb3\" class=\"graf graf--p graf-after--figure\">Essentially, promises are structured callbacks. We can simplify things even further by using ES7\u2019s new async\/await capability. This allows us to convert the promise chain to an intuitive try\/catch\/return structure. This is mostly syntactic sugar, where we can declare functions to be \u201casync\u201d on the outset and preface each promise with the keyword \u201cawait\u201d. Then, we wrap the code in a try\/catch\/return. If you have a promise, calling await on it will put the resolved value on the same scope as the original function.<\/p>\n<p id=\"11fb\" class=\"graf graf--p graf-after--p\">Now, the above pyramid of doom code has become this:<\/p>\n<figure id=\"1d64\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"1d64\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/3bb914591c8dc26100aefc8355df1b47?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/3bb914591c8dc26100aefc8355df1b47?postId=c76b00317464\" data-media-id=\"3bb914591c8dc26100aefc8355df1b47\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"6d20\" class=\"graf graf--p graf-after--figure\">And the API call code is this:<\/p>\n<figure id=\"6789\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n<figure id=\"6789\" class=\"graf graf--figure graf--iframe graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia is-canvasLoaded is-imageLoaded\" data-scroll=\"native\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" class=\"progressiveMedia-iframe js-progressiveMedia-iframe\" src=\"https:\/\/medium.com\/media\/fd7cd03bbe2e95bd7d5f52f7dcd1b9f5?postId=c76b00317464\" allowfullscreen=\"allowfullscreen\" data-src=\"\/media\/fd7cd03bbe2e95bd7d5f52f7dcd1b9f5?postId=c76b00317464\" data-media-id=\"fd7cd03bbe2e95bd7d5f52f7dcd1b9f5\" data-thumbnail=\"https:\/\/i.embed.ly\/1\/image?url=https%3A%2F%2Favatars0.githubusercontent.com%2Fu%2F10195031%3Fs%3D400%26v%3D4&amp;key=a19fcc184b9711e1b4764040d3dc5c07\" data-mce-fragment=\"1\" width=\"700\" height=\"250\" frameborder=\"0\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"c218\" class=\"graf graf--p graf-after--figure\">Using async\/await cleans the code to such a degree that I can\u2019t live without it.<\/p>\n<p id=\"e0a8\" class=\"graf graf--p graf-after--p\">With Node, we can use Javascript server-side and leverage its asynchronous capabilities. Indeed, the raison d\u2019\u00eatre of Node is the speed and simplification arising from an event-driven async process through callbacks. This is in contrast to the heavier sequential and concurrent <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/en.wikipedia.org\/wiki\/Node.js\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/en.wikipedia.org\/wiki\/Node.js\">Apache server<\/a> that blocks code unless another stack is created. I have oversimplified many things, but hopefully this solidifies our intuition of asynchrony.<\/p>\n<h3 id=\"3b92\" class=\"graf graf--h3 graf-after--p\">Sources<\/h3>\n<p id=\"07c5\" class=\"graf graf--p graf-after--h3\">For more about callbacks, see:<br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/stackoverflow.com\/questions\/13286233\/pass-a-javascript-function-as-parameter\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/stackoverflow.com\/questions\/13286233\/pass-a-javascript-function-as-parameter\">https:\/\/stackoverflow.com\/questions\/13286233\/pass-a-javascript-function-as-parameter<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/stackoverflow.com\/questions\/824234\/what-is-a-callback-function\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/stackoverflow.com\/questions\/824234\/what-is-a-callback-function\">https:\/\/stackoverflow.com\/questions\/824234\/what-is-a-callback-function<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/stackoverflow.com\/questions\/5187968\/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-other\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/stackoverflow.com\/questions\/5187968\/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-other\">https:\/\/stackoverflow.com\/questions\/5187968\/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-other<\/a><\/p>\n<p id=\"97db\" class=\"graf graf--p graf-after--p\">For more about promises, see:<br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_promises\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_promises\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_promises<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/medium.com\/javascript-scene\/master-the-javascript-interview-what-is-a-promise-27fc71e77261\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/medium.com\/javascript-scene\/master-the-javascript-interview-what-is-a-promise-27fc71e77261\">https:\/\/medium.com\/javascript-scene\/master-the-javascript-interview-what-is-a-promise-27fc71e77261<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/pouchdb.com\/2015\/05\/18\/we-have-a-problem-with-promises.html\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/pouchdb.com\/2015\/05\/18\/we-have-a-problem-with-promises.html\">https:\/\/pouchdb.com\/2015\/05\/18\/we-have-a-problem-with-promises.html<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/pouchdb.com\/2015\/03\/05\/taming-the-async-beast-with-es7.html\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/pouchdb.com\/2015\/03\/05\/taming-the-async-beast-with-es7.html\">https:\/\/pouchdb.com\/2015\/03\/05\/taming-the-async-beast-with-es7.html<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.mattgreer.org\/articles\/promises-in-wicked-detail\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"http:\/\/www.mattgreer.org\/articles\/promises-in-wicked-detail\/\">http:\/\/www.mattgreer.org\/articles\/promises-in-wicked-detail\/<\/a><\/p>\n<p id=\"536f\" class=\"graf graf--p graf-after--p graf--trailing\">For more about the event loop, see:<br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/EventLoop#Runtime_concepts\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/EventLoop#Runtime_concepts\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/EventLoop#Runtime_concepts<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/hackernoon.com\/understanding-js-the-event-loop-959beae3ac40\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/hackernoon.com\/understanding-js-the-event-loop-959beae3ac40\">https:\/\/hackernoon.com\/understanding-js-the-event-loop-959beae3ac40<\/a><br \/>\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/blog.sessionstack.com\/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/blog.sessionstack.com\/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5\">https:\/\/blog.sessionstack.com\/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5<\/a><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\">Escape callback hell! Source: Intuitive Asynchronous Javascript \u2013 Edwin Yung \u2013 Medium &nbsp;<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"https:\/\/monodes.com\/predaelli\/2019\/01\/15\/intuitive-asynchronous-javascript-edwin-yung-medium\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,50],"tags":[],"class_list":["post-5130","post","type-post","status-publish","format-standard","hentry","category-documentations","category-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1kK","jetpack-related-posts":[{"id":1614,"url":"https:\/\/monodes.com\/predaelli\/2016\/06\/01\/javascript-factory-functions-vs-constructor-functions-vs-classes-javascript-scene-medium\/","url_meta":{"origin":5130,"position":0},"title":"JavaScript Factory Functions vs Constructor Functions vs Classes \u2014 JavaScript Scene \u2014 Medium","author":"Paolo Redaelli","date":"2016-06-01","format":"link","excerpt":"https:\/\/medium.com\/javascript-scene\/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e#.13avjf4lk","rel":"","context":"In &quot;Senza categoria&quot;","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9317,"url":"https:\/\/monodes.com\/predaelli\/2022\/04\/28\/7-more-killer-one-liners-in-javascript-by-tapajyoti-bose-apr-2022-medium\/","url_meta":{"origin":5130,"position":1},"title":"7 More Killer One-Liners in JavaScript | by Tapajyoti Bose | Apr, 2022 | Medium","author":"Paolo Redaelli","date":"2022-04-28","format":false,"excerpt":"7 More Killer One-Liners in JavaScript | by Tapajyoti Bose | Apr, 2022 | Medium This is a continuation of the previous list of JavaScript one-liners. If you haven\u2019t checked out the article, you are highly encouraged to accomplish so. Let\u2019s crack on with the new list! 1. Sleep Function\u2026","rel":"","context":"In &quot;Javascript&quot;","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11779,"url":"https:\/\/monodes.com\/predaelli\/2024\/06\/29\/state-of-javascript-2023\/","url_meta":{"origin":5130,"position":2},"title":"State of JavaScript 2023","author":"Paolo Redaelli","date":"2024-06-29","format":false,"excerpt":"State of JavaScript 2023 The 2023 edition of the annual survey about the latest trends in the JavaScript ecosystem.","rel":"","context":"In &quot;Javascript&quot;","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3228,"url":"https:\/\/monodes.com\/predaelli\/2017\/07\/20\/reverse-engineering-one-line-of-javascript\/","url_meta":{"origin":5130,"position":3},"title":"Reverse Engineering One Line of JavaScript","author":"Paolo Redaelli","date":"2017-07-20","format":false,"excerpt":"ASCII animations in 1 line of #JS. #JavaScript is really the assembler of the Web","rel":"","context":"In &quot;Javascript&quot;","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11556,"url":"https:\/\/monodes.com\/predaelli\/2024\/04\/03\/bun-a-fast-all-in-one-javascript-runtime\/","url_meta":{"origin":5130,"position":4},"title":"Bun \u2014 A fast all-in-one JavaScript runtime","author":"Paolo Redaelli","date":"2024-04-03","format":"link","excerpt":"Bun \u2014 A fast all-in-one JavaScript runtime Bundle, install, and run JavaScript & TypeScript \u2014 all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.","rel":"","context":"In &quot;Javascript&quot;","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11932,"url":"https:\/\/monodes.com\/predaelli\/2024\/09\/23\/bun-a-fast-all-in-one-javascript-runtime-2\/","url_meta":{"origin":5130,"position":5},"title":"Bun \u2014 A fast all-in-one JavaScript runtime","author":"Paolo Redaelli","date":"2024-09-23","format":false,"excerpt":"Bundle, install, and run JavaScript & TypeScript \u2014 all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in. Gonna try this Bun \u2014 A fast all-in-one JavaScript runtime","rel":"","context":"In &quot;Javascript&quot;","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/5130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=5130"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/5130\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=5130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=5130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=5130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}