Consider the following example, in which
callback is a function that we're going to pass as a parameter.
At this point, you might be wondering what's going on with
callback. We've defined it as the third parameter, and called it inside the
sumNumbers function, but it's not really doing anything, is it? It doesn't look like a function.
See? The third parameter, defined earlier as callback, is in fact a function. We're passing it here as an anonymous function (that is, a function without a name), but it's worth mentioning that we could just as easily pass a named function too - there's no difference. Writing it inline like this just makes for slightly shorter code examples.
To recap, we've seen two things so far: a function calling another function (
callback) and a function being passed into another function as a parameter.
So we can define a callback function as:
A function that isn't immediately executed, but instead called back at a point that's convenient to us inside its containing function's body.
So what are callback functions good for? Surely we're just over-complicating this trivial example, right? Well yes, you'd be correct in suspecting that a callback isn't strictly necessary for the process of adding two numbers together.
But what about a more complex example?
Without callbacks, functions just get called, in order, and return some value.
What if we wanted to change that order? Say, to make sure some other process happened before a particular function got called? That's known as an asynchronous operation. They're really useful for situations where things take a while to finish, because it means we don't have to make the browser wait around for some function to return a value.
Let's look at callbacks in the context of an AJAX request using jQuery:
So, AJAX is a common real-world example of where using callbacks to call functions asynchronously can come in really handy.