Solve Callback Hell with Composition

Share this video with your friends

Send Tweet

Many APIs in JavaScript rely on callbacks, so when using APIs together, we end up in deeply nested callbacks AKA "Callback Hell". This course solves callback hell through composition by moving all of the nesting into the internals of our helper functions which can expose a clean API that becomes a list of functions in a pipe.

James
James
~ 4 years ago

How do we figure out that this is the form that's needed? We invoke nest with the first param as one of the functions we took out but the second param is also nest but this time with two params. It's very confusing how we ended up with the code below plus how the order is figured out. Can anyone explain some more please?

nest(getURL)(nest(timeout)(click))((data) => { console.log(data) })

Alex Jacobs
Alex Jacobs
~ 4 years ago

+1 for it being confusing.

I plan to try to reproduce the steps without looking to try and make a mental map of how this final composition was created

Alex Jacobs
Alex Jacobs
~ 4 years ago

Also just saw that there’s a link in the notes for lesson 8. It points to the next set of lessons where these concepts are built up more gradually

~ 4 years ago

I think it is much harder to read doing this way.

Richard Dyce
Richard Dyce
~ 4 years ago

+1 for functionA(functionE)(functionB(functionC)(functionD)) being confusing

James
James
~ 4 years ago

I think it is much harder to read doing this way. I would still like to understand how we get there before simplifying with lodash

Andrea Di Marco
Andrea Di Marco
~ 4 years ago

How do we figure out that this is the form that's needed?

Based on the function you are trying to break and recompose. If you look closely, nest is reproducing the same kind of contract... The outer function is passing an event that is ignored, which is the value that gets passed to inner and so on. So nest is nothing magical and its implementation will depend on the problem at hand. The thing to stick in mind is that you break your starting callback hell into functions and then create an operator that describes what you want to happen.

I'm a bit confused by the signature of John's nest function and the reason why he starts accepting inner before outer and not the other way around. It's just harder to reason about since you have inner and then outer before you jump back to the final listener. Just preference?

John Lindquist
John Lindquist(instructor)
~ 4 years ago

Thanks for all the feedback!

Re: Confusion with the lesson

Please note that this lesson is mostly a setup for future lessons where we start using this pattern over and over.

The core takeaways of this should be:

  1. extract nested callbacks
  2. use a pattern to manage callbacks

Don't worry about fully understanding the pattern now as it is covered many times over in future lessons with much better examples showing the value of the pattern. Even then, this is a difficult and complex subject tackled by many different frameworks, approaches, and tradeoffs. These lessons are essentially building a framework from scratch where you're seeing the ugly internals and learning how they work.

Lastly, this example is far too simple to fully represent the value of handling multiple streams of events, but I had to start somewhere. The best advice I have for each of these comments is "please keep watching the next lessons". Thanks for sticking with it and giving this course some of your valuable attention.