Callback functions often seem quite confusing or complicated at first, but if we take a look under the hood we’ll find that they’re fairly straightforward. The chances are that you’ve already used them.
Callbacks are typically used to run a piece of code after a certain event has happened. Whether this event is mouse-clicking on a link, data being written to a database, or just another piece of code finishing executing isn’t important, as it could be just about anything. A callback function itself is typically an anonymous function—a function declared without a name—that’s passed directly into the receiving function as a parameter. Don’t worry if this just seems like jargon right now; we’ll look at code examples soon and you’ll see how easy it actually is!
Running a Callback Function
The callback parameter is expected to be a function, which can be invoked at a specific
point in the setTimeout function 1. In this case you’re passing it a simple anonymous function 2 that will write a message to the console log. So when the setTimeout function deems it appropriate, it will invoke the callback and the message will be logged to the console. That’s not so difficult, is it?
Something to bear in mind when passing anonymous functions around like this is that the callback doesn’t inherit the scope of the function it’s passed into. The callback function isn’t declared inside the destination function, merely invoked from it. A callback function inherits the scope in which it’s defined.
Let’s understand this with the idea of scope circles and look at this visually in figure
Here you can see that the callback has its own local scope inside the global scope, as that’s where requestB is defined. This is all very well and good if your callback will only need access to its inherited scope, but what if you want it to be smarter? What if you want to use data from your asynchronous function in your callback? Currently the example callback function has a dollar amount hard-coded into it, but what if you want that value to be dynamic, to be a variable? Assuming this value is set in the setTimeout function, how do you get it into the callback? You could save it to the global scope, but as you know by now this would be bad. So you need to pass it as a parameter into the callback function. This should give you something like the scope circles shown in figure
This code snippet will output the same message to the console that you’ve already seen. The big difference now is that the value of dollars is being set in the setTimeout function and being passed to the callback.