Thanks for doing this!

Something which throws me whenever I look at callback code, is where the "err, response, body" arguments to postResponse come from. I feel like this is a stumbling block for many people. Thanks again!

  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}

function postResponse(**err, response, body**) { // <<<<<< here
  var statusMessage = document.querySelector('.status')
  if (err) return statusMessage.value = err
  statusMessage.value = body
}
document.querySelector('form').onsubmit = formSubmit

An example could be:

app.get('something', function (req, res) {
  res.render('view1');
});

app.get('other', function (req, res) {
  res.render('view1');
});

Refactor to:

function respondWithView (viewName) {
 return function ( req, res ) {
   res.render(viewName);
 };
}

app.get('something', respondWithView('view1'));

app.get('other', respondWithView('view2'));

I sorta slept through web2.0 and when I got back into it EVERYONE was doing what Max calls callback hell so so did I. But it's more than just callback hell it's insane nesting. At the top you typically have a (function(){...}()) and everything inside ... is nested to the 27th degree. It's so easy to get confused about where a } or ; or , belongs that it can really waste your time compared to named functions.

I get it about keeping code out of the global namespace. I can also see some benefit in IDEs which collapse the various sections but are there any other reasons? Why did the JS developer community start using anonymous functions and "infinite" nesting?

Good stuff! I think it's worth also mentioning async.js (https://github.com/caolan/async/). I use it a lot to keep async stuff in check, especially parallel().

The ultimate solution to all of your callback troubles. Sample implementation: when.js.

Hi. all

You can check my implementation here:

https://gist.github.com/askucher/7751044

What you think?

Using callbacks comes with many issues and indentation with curly braces jungle is but one of them. By passing a callback you are passing the control over to a potentially buggy code with undesired behaviour.
The callback problems are:

• callback can be called once, twice, infinitely many times, or never, and you have no control over it
• callback can be called in synchronous or asynchronous fashion
• callbacks swallow exceptions and force developers to conventions
• callbacks make writing the curlybraced and indented code easy

I did not invent all of it myself, I learned a lot in YDKJS: https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/ch2.md

Yet the webpage only mentions the last one, from my point the least important one. Is it possible to at least mention that there are other, more serious problems, which actually turn this whole area into a real hell?

right now it just shows a giant runon sentence of unformatted markdown text

I think you should not write code as below:

if (err) return statusMessage.value = err

There will throw some error like: Uncaught SyntaxError: Illegal return statement

File Path:
callback-hell/index.html

I think more emphasis could be done on how to rewrite code from callback hell style to async style, also, more effor could be made in order to explain why async is a good idea, including async examples and await try catch stuff.

Where are the semicolons?!

I understand that it is intentional (whyyy), but since you are using vanilla JS it makes no sense to me.

First, the section has nothing to do with closures, at all. No variables are being closed over. It is maybe an example of factory functions, if anything.

Second, it has nothing to do with the rest of the page, and callback hell in general. It's more about someone's favorite pattern for decoupling DOM events from "business logic."

Finally, at the end it's trying to advertise hootroot.com, whatever that is.

IMO it doesn't belong on callbackhell.com.

See: https://choosealicense.com/no-permission

You showed an example (reading sizes of files) that seems very difficult to make better and even after following your steps, it is tough to read and understand. I would love to see the right way to do that.

Check it out https://github.com/Guseyn/cutie (Node.js)

Maybe it would be useful to mention callback binding, I know that personally was confusing for me in the beginning. For instance, you might expect this to work:

Something.prototype.foo = function (cb) {
  someOtherObj.bar(function (err, res) {
    cb(null, this.value)
  })
}

But actually it will not work since the innermost callback is called from the context of someOtherObj, and this doesn't resolve to the Something instance (so this.value end up being something else).

The solutions are foo(function () { this.value... }.bind(this)), var self = this; foo(function () { self.value... }), or maybe ES6 arrow functions (since they take their context from wherever they were created), () => { this.value... }.

http://cl.ly/image/1U2e3K3M1C3p

Hi, could you please enable HTTPS support for this GitHub Pages site? Should be as easy as flipping a switch in repo settings: https://help.github.com/en/articles/securing-your-github-pages-site-with-https