I’ll briefly explain the pattern of a callback function, before I answer the particular function.
First of all, I wish you to understand that a callback function is nothing but a pattern to achieve asynchronous function. And the callback function that you’re passing around is just a normal function.
As I mentioned above, callback is a legacy “workaround” that’s still been widely used. This defacto pattern was adopted by almost all Javascript developer in early ages, when the Javascript language specification(ECMAscript) doesn’t have an official support for async function. It has been gradually replaced by promise and async in recent years. You’ll more or less get to this part when you work on a new website after completing this course. However, even now, the most popular Expressjs server framework is still written in callbacks. Thus the reseaon FCC’s course introduce the callback first.
The callback function has a very simple pattern. It’s nothing but a function that’s been passed (as a parameter) into another function (which is executed asynchronously). I’ll write it in the way of function declaration to make it clear, however, its the same if you write it in anonymous function.
For example, you or some framework is implimenting a feature called asyncFunction that’s can be time consuming. Thus, you wish this be asynchronously executed and doesn’t block your server. Then you impliment this async function with a callback. As you can see that callback is just a parameter.
function asyncFunctionCreateFruits (callback) {
// You will declare some variables
let apple, banana;
// You will perform some magic
// Blah, bleb, blahblah...
// It could takes awhile
// ...
// ...
// Finally, the magic finished,
// You will let the passed callback perform the rest work
// And you'll pass apple and banana to the callback
callback(apple, banana);
}
// I am a chimpanzee
function handleFruits (fruit, moreFruit) {
// I eat fruit
console.log("eat", fruit)
console.log("eat", moreFruit)
}
// So when you actually call the asyncFunction
// You pass the handler function you wrote as a callback
asyncFunctionCreateFruits (handleFruits);
If it’s a framework’s API, the documentation will explicitly document the parameter for this callback. Or if you wrote the above function, you’ll need document it.
The magic, or what made it so popular, is that the pattern callback function, besides its achieved asynchronous, it separated the concern from developer that you are actually handling the async result. In the above example, when developer write the handleFruits function, it doesn’t matter to the developer if its passed as a synchronous or asynchronous. The callback function is like a piece of code that’s been executed “just there”. For example, if I copy paste the above callback into the async function and change its name slightly,
function asyncFunctionCreateFruitsAndEatThem () {
// You will declare some variables
let apple, banana;
// You will perform some magic
// Blah, bleb, blahblah...
// It could takes awhile
// ...
// ...
// Finally, the magic finished,
// I am a chimpanzee
console.log("eat", fruit)
console.log("eat", moreFruit)
}
asyncFunctionCreateFruitsAndEatThem();
.