Understanding JavaScript Callback Functions for Beginners

What's a callback function?

If you have never heard of a callback function, I'll tell you what it is in the simplest way I could think of...

It is a function passed as an argument of another function, to be executed later or immediately.

A simple example

For example, take a look at these functions:

//Defining functions
function prepare(ingredients, callback) {
       console.log("Preparing " + ingredients);
       callback();
}

//callback function
function chop(){
       console.log("Chopping");
}

//Calling the function
prepare("onions and garlic", chop);

In your daily life, you probably observed that a chef will prepare ingredients first then starts chopping them. The functions above illustrates that.

The prepare() function takes in 'ingredients' as its first argument and a callback function called chop() as the second argument, which will execute inside the prepare() function at a later time. So the console will print:

Preparing onions and garlic
Chopping

Most of the time, you won't see callback functions written like the example. Developers like to keep code concise so we can just insert chop() directly into prepare() like:

//Defining function
function prepare(ingredients, callback) {
       console.log("Preparing " + ingredients);
       callback();
}

//Calling the function
prepare("onions and garlic", function chop() {
       console.log("Chopping" );
});

See? Now the code looks more concise! If you want to take it a step further, JavaScript has anonymous functions which lets you declare and execute functions without naming them. Callback functions can be anonymous functions like so:

//Defining function
function prepare(ingredients, callback) {
       console.log("Preparing " + ingredients); 
       callback();  
}

//Calling the function
prepare("onions and garlic", () => {
       console.log("Chopping");
});

As seen above, now the callback function is not called 'chop'. It is nameless and therefore anonymous.
I hope this helps you understand callback functions a little better.

**Key takeaway: **A callback function is a function passed as an argument of another function, which will be executed eventually. The callback function executes inside the main function and it is up to the main function to decide when to execute it.

An example with an argument

So now you know that the main function which the callback is executed in has the power to decide when it executes. In the previous example, it executes immediately after the main function executes.

But there's also more that the main function decides for the callback. It may pass arguments to the callback function too. Let's see an example of a callback function with an argument.

Have a look at this block of code:

//Defining function
function prepare(ingredients, callback) {
       console.log("Preparing " + ingredients);
       callback(ingredients); //this time, ingredients is added as an argument for the callback
}

//Calling the function
prepare("onions and garlic", function chop(arg) { //chop() now takes in arg as an argument
       console.log("Chopping " + arg);
});

This time, instead of just calling the callback function chop(), we pass in ingredients as an argument and tell it to print "Chopping " plus its argument when executed. You should see the console now printing:

Preparing onions and garlic
Chopping onions and garlic

More uses for callback functions

It would seem lame if all callback functions can do is only like the examples I have shown you. But callback functions are also functions! Which means it can do anything a function can do too! So don't underestimate it!

Let's have another example. Say you want the console to print:

Preparing onions and garlic
Chopping onions

So that means the callback function has to take in ingredients and filter out words that are not onions so that it will only print "Chopping onions" instead of "Chopping onions and garlic". Let's write the function for that:

function chop(ingredients){
     var value = ingredients.match(/\bonions\b/g);
     if (value){console.log("Chopping " + value);} //Chop onions if one of the ingredients are onions

     else{console.log("Not chopping");}  //if no onions are found, no need to chop
}

In this callback function, we are asking it to find if the word "onions" is in the ingredients argument. If it is, it will print "Chopping onions". If not, it will print "Not chopping". Let's run this callback function as usual.

function prepare(ingredients, callback) {
       console.log("Preparing " + ingredients);
       callback(ingredients); 
}

function chop(ingredients){
     var value = ingredients.match(/\bonions\b/g);
     if (value){console.log("Chopping " + value);} //Chop onions if one of the ingredients are onions
     else{console.log("Not chopping"); } //if no onions are found, no need to chop
}

prepare("onions and garlic", chop);

Our console should display:

Preparing onions and garlic
Chopping onions

Yay! That's exactly what we want!

Conclusion

I hope this tutorial helps you understand what callback functions are, how to use them with/without arguments and how to make them as useful as functions! There are still many things to learn about callback functions so I encourage you to keep practicing and learn by building more projects. You'll soon see the beauty and incredible-ness of callback functions.

If you have any questions, remember that we are all here to help so feel free to leave a comment! If you find this tutorial useful, please let me know by clicking 'thumbs up' so I know that I should make more of it! Thanks for reading and have fun learning! Cheers!