Callback Functions

Reading through code can oftentimes become confusing. Keeping track of functions and variables is hard enough, but when you notice that a previously defined function is being used as an argument to another function things can become complicated. Thankfully there are valid reasons why this sometimes occurs and we are going to explore those use-cases. The concept that we are discussing is a Callback Function.

MDN docs defines a callback function as "a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action."

Here's an example of a simple callback function...

function feedDog(dogName, callback) {
  alert(`Time to feed ${dogName}!`);
  callback();
}
function postMeal(){
  alert("Let's keep those teeth pearly white... Here's a dental treat");
}
feedDog('Bruno', postMeal);

First, I'm defining a function, 'feedDog', which creates an alert to feed a dog by name. Inside 'feedDog' I call a function, 'callback', that is not yet known. Next I define the function 'postMeal', which creates an alert to give the dog a dental treat.

To bring it all together, I call 'feedDog' and pass two arguments - the dog's name and the 'postMeal' function. At this point, I could have passed any function as the second parameter. When the code executes it creates the first alert to feed 'Bruno', then calls 'postMeal' which creates an alert to give him his dental treat.

This example could have easily been consolidated to one function. So when are callback functions particularly useful?

Callback functions are very useful for the handling of events. If specific functions should only execute for predetermined user actions (a mouse click, scroll, text entry - all examples of events), the use of an 'event listener' is common in JavaScript. An event listener acts as a callback function to start a process that was triggered by the user action.

Callback functions are also useful when managing asynchronous functions. JavaScript executes asynchronously, which means that it does not wait for a previous function to finish before executing the next function. This is sometimes problematic because a function may require information that is provided upon the completion of a previous function. To prevent an asynchronous function from continuing without prerequisite data, it is helpful to use an asynchronous callback. An example of an asynchronous callback is '.then', which is commonly found in fetch requests.

The use of callback functions is something that frequently appears in JavaScript code. While some callback functions become maze-like, the typical use of callback functions makes our lives easier as programmers and expands the possibilities of asynchronous code.

Resources:

1. MDN web docs - Callback function

2. MDN web docs - EventTarget.addEventListener()