{"id":1511,"date":"2016-09-08T18:40:05","date_gmt":"2016-09-08T22:40:05","guid":{"rendered":"http:\/\/codinggorilla.domemtech.com\/?p=1511"},"modified":"2016-09-09T09:32:25","modified_gmt":"2016-09-09T13:32:25","slug":"alternatives-to-deeply-nested-callback-functions-in-javascript","status":"publish","type":"post","link":"http:\/\/165.227.223.229\/index.php\/2016\/09\/08\/alternatives-to-deeply-nested-callback-functions-in-javascript\/","title":{"rendered":"Alternatives to Deeply-Nested Callback Functions in Javascript"},"content":{"rendered":"

A few days ago, I wrote a server in Node.js<\/a>, the purpose of which is to email\u00c2\u00a0me when an API found in Nuget is updated. I thought the project\u00c2\u00a0would take a few\u00c2\u00a0hours, but as it turned out, it took several days. You may ask “How is this possible for such an easy problem?” Unfortunately, I spent a lot of time trying to figure out what API to use to read a text file, and how to use the API. It led me to an understanding of a fundamental problem with Javascript known as “callback hell” (1, 2).<\/p>\n

<\/p>\n

In languages like C# and Java, file system I\/O requests are usually blocking<\/a>:\u00c2\u00a0the function does not return until the request is complete. A\u00c2\u00a0call to System.IO.File.ReadAllText<\/a> opens a file, reads all the lines of text in the file into a string, closes the file, and returns the string. Control flow is transferred to the function and does not return until completion. Blocking functions are\u00c2\u00a0easy to use and understand in an imperative<\/a> or functional<\/a>\u00c2\u00a0programming context.<\/p>\n

However, in Javascript, most APIs are non-blocking in order to boost performance and responsiveness of an application. Non-blocking function calls are implemented using a callback function<\/a>,\u00c2\u00a0a computation that is executed by another function. For example, fs.readFile is a non-blocking function that opens a file, reads the text in the file, calls a callback function with two\u00c2\u00a0arguments, one of which contains the text, and closes the file. Code that textually follows fs.readFile cannot depend on the data because the callback is invoked asynchronously. Since the data is available\u00c2\u00a0through\u00c2\u00a0the\u00c2\u00a0callback function, a sequence of callback functions invocations is required, one dependent on the result of an enclosing callback. When callbacks are written as\u00c2\u00a0anonymous functions, the dependency is a nesting<\/a>.<\/p>\n

Deeply-nested callback functions<\/h3>\n

In my project,\u00c2\u00a0I wanted to create an array of URLs for APIs in Nuget.org from a file. Each URL in the file is on a separate line, and may contain trailing spaces, tabs, new lines, and carriage returns. Using nested callback functions, the Javascript code for this may look like the following:<\/p>\n\n

As we implement\u00c2\u00a0the code that further processes the list of URLs (to request the webpage and extract dates of when the API was updated),\u00c2\u00a0the depth of the nesting callback functions increases. Callback chains is an implementation of a DU-chain<\/a>\u00c2\u00a0of asynchronous variables, which is, unfortunately, the result of the design of Javascript. \u00c2\u00a0At some point\u00c2\u00a0the code becomes unmanageable<\/a>\u00c2\u00a0(3).<\/p>\n

Alternatives to deeply-nested callback functions<\/h3>\n

Over the years, a number of solutions have been developed to solve deep nesting (4-9).<\/p>\n

Declare a function for each nesting<\/h5>\n

Perhaps the easiest solution is to place each block corresponding to the callback in a separate function. The advantage of this that each block is now at the same lexical level.<\/p>\n\n

One\u00c2\u00a0must judiciously decide between placing\u00c2\u00a0short blocks into separate functions that may be far removed from the context of the enclosing\/calling block. However, this solution does not really solve the main problem of long chains of callback functions: a function is still a function regardless if it is has a name or is anonymous.<\/p>\n

Function chaining using Promises<\/h5>\n

Promises for Javascript<\/a>\u00c2\u00a0is an extension of a callback\u00c2\u00a0(10, 11). Functions that return a Promise can be chained together using the “then” method at the same lexical level.<\/p>\n\n

Support for Asynchronous Programming<\/h3>\n

Support for asynchronous operations within\u00c2\u00a0the language are available for many languages, including Javascript in ES8\/ES2017. (NB: async\/await was dropped from ES7\/ES2016. See the spec<\/a>.) The async and await keywords\u00c2\u00a0eliminate the need for explicit callback functions. With the await function, continuation is registered as a callback with the awaiting expression. async\/await is a feature of ES8, but\u00c2\u00a0is available in Node.js using Babel<\/a>. (12-16)<\/p>\n

Await\/Async in ES8\/ES2017<\/h5>\n

This solution works with\u00c2\u00a0Node.js 4.6+ and\u00c2\u00a0Babel<\/a>. To set up Webstorm, follow these instructions<\/a>.<\/p>\n\n

Asyncawait API<\/h5>\n

A similar solution is available for ES6 Javascript using\u00c2\u00a0the API “asyncawait”, available through NPM. It provides a similar syntax and works well.<\/p>\n\n

Further Information<\/h3>\n
    \n
  1. Callback Hell.\u00c2\u00a0http:\/\/callbackhell.com\/<\/a><\/li>\n
  2. Pyramid of doom (programming).\u00c2\u00a0https:\/\/en.wikipedia.org\/wiki\/Pyramid_of_doom_(programming)<\/a>.<\/li>\n
  3. Harrison, Warren, and Curtis Cook. “Are deeply nested conditionals less readable?.” Journal of Systems and Software<\/i> 6.4 (1986): 335-341.\u00c2\u00a0http:\/\/www.sciencedirect.com\/science\/article\/pii\/0164121286900038<\/a><\/li>\n
  4. Computer Programming\/Coding Style\/Minimize nesting.\u00c2\u00a0https:\/\/en.wikibooks.org\/wiki\/Computer_Programming\/Coding_Style\/Minimize_nesting<\/a><\/li>\n
  5. Handling Synchronous Asynchronous Loops In Javascript\/Node.JS.\u00c2\u00a0https:\/\/zackehh.com\/handling-synchronous-asynchronous-loops-javascriptnode-js\/<\/a><\/li>\n
  6. Green, Thomas R. G. “Ifs and thens: Is nesting just for the birds?.” Software: Practice and Experience<\/i> 10.5 (1980): 373-381.\u00c2\u00a0http:\/\/onlinelibrary.wiley.com\/doi\/10.1002\/spe.4380100505\/abstract<\/a><\/li>\n
  7. Clarke, Lori A., Jack C. Wileden, and Alexander L. Wolf. “Nesting in Ada programs is for the birds.” ACM Sigplan Notices<\/i>. Vol. 15. No. 11. ACM, 1980. http:\/\/dl.acm.org\/citation.cfm?id=948651<\/a><\/li>\n
  8. https:\/\/www.quora.com\/How-do-you-make-an-async-function-synchronous<\/a><\/li>\n
  9. http:\/\/stackabuse.com\/avoiding-callback-hell-in-node-js\/<\/a><\/li>\n
  10. Futures and promises.\u00c2\u00a0https:\/\/en.wikipedia.org\/wiki\/Futures_and_promises<\/a><\/li>\n
  11. https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise<\/a><\/li>\n
  12. http:\/\/stackabuse.com\/node-js-async-await-in-es7\/<\/a><\/li>\n
  13. http:\/\/es6-features.org\/<\/a><\/li>\n
  14. Bierman, Gavin, et al. “Pause\u00e2\u20ac\u2122n\u00e2\u20ac\u2122Play: Formalizing Asynchronous C^\\ sharp.”European Conference on Object-Oriented Programming<\/i>. Springer Berlin Heidelberg, 2012. http:\/\/link.springer.com\/chapter\/10.1007\/978-3-642-31057-7_12<\/a><\/li>\n
  15. Tasirlar, Sagnak, and Vivek Sarkar. “Data-driven tasks and their implementation.” 2011 International Conference on Parallel Processing<\/i>. IEEE, 2011. http:\/\/dl.acm.org\/citation.cfm?id=2066922<\/a><\/li>\n
  16. Cordemans, Piet, Eric Steegmans, and Jeroen Boydens. “Task Parallel Paradigms: a Comparative Case Study.” Annual Journal of Electronics<\/i>. Vol. 7. Technical Univ. of Sofia, 2013. https:\/\/lirias.kuleuven.be\/handle\/123456789\/416602<\/a><\/li>\n
  17. Callback heaven for Node.js with async\/await.\u00c2\u00a0https:\/\/github.com\/yortus\/asyncawait<\/a><\/li>\n<\/ol>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    A few days ago, I wrote a server in Node.js, the purpose of which is to email\u00c2\u00a0me when an API found in Nuget is updated. I thought the project\u00c2\u00a0would take a few\u00c2\u00a0hours, but as it turned out, it took several days. You may ask “How is this possible for such an easy problem?” Unfortunately, I … <\/p>\n

    Continue reading “Alternatives to Deeply-Nested Callback Functions in Javascript”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/posts\/1511"}],"collection":[{"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":0,"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/posts\/1511\/revisions"}],"wp:attachment":[{"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/categories?post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/165.227.223.229\/index.php\/wp-json\/wp\/v2\/tags?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}