Passing Values Through Callback Hell

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Callback Hell is made up of nested functions. If we compose our functions instead of nesting them, we need to remember to pass values down to the next API that takes a callback. We can do this by setting up a "mapping" behavior in our outer/inner relationship so that the value from the outer can be used to create the broadcaster of the inner.

Congrats on finishing Section 01: Introduction to Callbacks, Broadcasters, and Listeners!πŸŽ‰πŸŽ‰

πŸ‘‰ CLICK HERE to continue to the next section, Establish Callback and Closure patterns Around Async Browser Behaviors. πŸ‘ˆ

John Lindquist: [0:00] I cheated a bit in the last lesson by ignoring this value, because when working with callback hell, you're often basing what happens the callback in the inner value on whatever the value is that comes through the outer value.

[0:11] To do that, we're going to change this a tiny bit where instead of inner, this is going to be a function called mapInner. What I mean by that is that each of my functions up here are going to get a config step. For example, config in this one could be the type of event, say config there. Config for the timeout could be, let's say, the amount of time. Config for the URL could be the id on this URL.

[0:44] If we think of each of these being able to configure the next one, then we can think of this function as taking that value, so mapInner, and passing the value in there. This will be the config. I'm going to rename this to config. This will just generate a new inner. I can then just invoke inner with the listener.

[1:05] Now from mapping my inners, first I'll configure my click with click. Then my nest function takes this mapInner function. My click sends out an event here inside of nest. Let's write that as event. We'll have the timeout be based on the event.x.

[1:24] Right now, we're not passing a value from the timeout because timeout right here is just invoking this listener. Let's say listener takes the config. It's both the amount of time that it takes, and it's also going to invoke the listener with that config. If this takes 500 ms, it's also going to pass 500 down to the next step.

[1:47] We'll do that here. We'll say nest. I'll just say time. Then we'll pass in time to the getURL. Now when I save and format here, wherever I click on the page, I'll click, and then I clicked at the event.x of 38. That only took 38 ms to call that. Then I got the id of 38.

[2:07] If I click far over to the right over here, you'll see that took 439 ms and I got the id of 439. I click as far to the right as I can. I'll collapse this. Now I got 497, because that's the value that came from the click event.x.

[2:30] Now instead of thinking in nested callbacks, you can just think of what value am I receiving and how do I want to configure the next callback, and in the next step, what value am I receiving and how do I want to configure this.

[2:42] A pretty cool trick, if this value matches up perfectly with this value, you can just pass this getURL as the function. I can delete this and delete this because now you're saying whatever value comes through here, it's going to be passed in here as a config.

[2:59] You'll see that when I click -- I'll click really far to the left -- you'll see I got the id of 2. That just works because I didn't have to manually pass in the config value since nest is looking for a function which will get called with a config.

[3:16] I know that we got complicated really fast here talking about composition and nesting and mapping and some fairly advanced things. Let's slow things down the rest of the course and take it a bit more step by step.

egghead
egghead
~ 20 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today