Passing Values Through Callback Hell
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!🎉🎉
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.