Understanding Callback Functions

When I was just starting out in programming I had the hardest time understanding how some of the most basic native JavaScript methods worked. One of the main reasons for this was I didn’t understand the concept of a callback function, let alone an ANONYMOUS callback function. Woah. So to understand this, let’s take it slow. Here is a function.

All this function does is take an argument and prints it to a console. Nothing too crazy here.

The way we would use it would look something like this…

So, whatever we pass in gets printed to the console. Pretty simple stuff.

Let’s now say that we want to print out each item in an array to the console. How would we do this just one time without a function? Probably something like this:

In the code above, we created a variable called groceryList, and set it to an array of grocery items. Below that, we’re doing a simple for loop through groceryList and logging each item with a message to the console.

Let’s say we had to do this a bunch of times. We may want to put this for loop into a function that we could call whenever we wanted. Reusable code is always good. That would look like this:

Great, we now can call logGroceryItemsWithMessage whenever we want, and it will run that for loop over our groceryList. This is kind of one dimensional though. What if I have two lists? Should I make another function? I think there’s a better way. We could have our function take in any list, and log out the message for those items too!

Nice! We can now use our function with any array that we want. We just need to pass it in and our function will print out our message with each item.

I think a good next step would be to refactor the code so our logItemsWithMessage function just loops through the array, and any logic we want to have applied to the item we can have handled by a different function.

The first thing we did was create a new function logMessage. We’ve renamed our function logItemsWithMessage to forEach.

So remember that before in forEach we were looping through and calling console.log on each item with a custom message. Now what’s going on is that we’re handing off each array item to logMessage, and logMessage is handling the logging.

Hmm… I think there’s a problem though. The looping logic doesn’t seem very reusable, since for each item all we can do is call logMessage. What if I wanted to do something different with each item? I don’t want to have to change logMessage.

What we can do instead, is set forEach up to take a function as an argument, and then for each item, call the function and pass the item to that function. This would look something like this.

Did you see what just happened there? It’s a subtle change, but it’s awesome.

We’ve added fn as a second parameter to forEach. Then we call fn and pass arr[i] (the item) as an argument to fn. The last thing we did was pass logMessage as the second argument to forEach. So logMessage will come into forEach as fn.

So forEach is going to run, loop through all the items in arr, call logMessage with the item, and logMessage is going to log our message to the console.

This means that now we can pass any function we want to forEach and it will apply the function’s logic to each item.

However, what if we don’t want to define our function beforehand? What if we just want to define what logic we want right then and there when calling forEach?

It’s as simple as that. You get to define what happens with each item when you call forEach when you write the anonymous callback function. The anonymous callback function in the example I wrote is this bit:

So we pass that anonymous callback function into forEach as the argument that corresponds to fn. The item then gets passed into the anonymous function as the first argument, which we can reference with item. Finally we do our logging logic right there in that anonymous function.

There we have it, the callback function and the anonymous callback function. As a final note, even though I ended on the anonymous callback function, that doesn’t mean it’s always better to use by any means. By using named functions, it allows you and other developers to easily see your forEach (for instance) and look at the name of the callback to know what it’s essentially doing.

The goal of this post was to give you an intro to callback functions in general. If any parts were confusing or you’d like me to go into anything else, please let me know in the comments!

I hope you enjoyed, and I’ll see you next time.

Related posts:

Forest fires from Amazonia to Siberia and Australia, fish migrating because of oxygen holes in the ocean, melting ice caps and increased risks of floods and droughts: These are just some of the…