Day[20] – All about Callback Functions (All about Callback Functions)

Did I tell you that I love helping people out? I do. I love guiding people through their coding problems. This is one of the reasons for this blog. I love sharing what I learn to as many people I can share it with. I write this blog so that, hopefully, I can help you with your coding journey.

So, today, I helped a few people out over at Udacity. As I mentioned before, I am part of a Grow with Google challenge where about 10% of the participants get a full blown nanodegree from Udacity on their Front End program.

We only have 2 weeks left. So, it’s crunch time for everyone.

Good thing, however, is that people that have finished the challenge already are ready and willing to help out. I finished the challenge as well. So, I try to give back as much as I can.

One question today was about callback functions. So, today, that’s what I want to talk about.

Callback Functions

So, what is a callback function. Here’s the definition on the Mozilla Developer Network:

A callback function is 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.

To explain that further, I’ll first show you a regular function. We can define functions with or without parameters. Parameters are placeholders for variables that you will give to the function when it’s ready to execute. Here’s an illustration.

let myName = "Jon";

function helloFriend(yourName) { // yourName is a placeholder for the actual data the function needs
  console.log("Hello " + yourName);
}

helloFriend(myName); // the variable myName as an argument
helloFriend("Christina"); // the string "Christina" as an argument

You can see here that we called helloFriend twice, once using our variable and the next as a literal string. In both cases, the true values of the arguments are given/passed to the function helloFriend. When it evaluates both calls, the resulting print out on the console are.

Hello Jon
Hello Christina

You see that the parameter yourName was replaced by the corresponding arguments that we gave the call to helloFriend.

Callback functions work the same way. However, instead of strings or numbers, we give the calling function a function. Here’s an illustration.

function name() {
  return "Cadence";
}

function helloFriend(yourName) { // yourName is a placeholder for the actual data the function needs
 console.log("Hello " + yourName());
}

helloFriend(name); // the function name as an argument

As you can see here, everything looks very similar to our previous example. However, you can see that we are now passing a function to helloFriend instead of a string.

In helloFriend‘s inner code, once the call is made to execute the code, the function will replace the parameter yourname. Essentially, it becomes like this.

console.log("Hello " + function name() {
  return "Cadence";
});

That, in turn eventually becomes like this.

console.log("Hello " + "Cadence");

Finally, it is printed out on the console as

Hello Cadence

One thing you have to remember when using callback functions is that you should only pass the function name. Do not add the parenthesis () on the call.

helloFriend(name()); will give you an error because the name() function will execute right away before being passed to the helloFriend function. Since helloFriend is expecting a function, you will get an error.

There are also other ways of using callback functions.

Using Function Expressions

Function expressions are functions assigned to variables.

Here’s an example of this.

let thisName = function () {
 return "Toad";
}

function helloFriend(yourName) { // yourName is a placeholder for the actual data the function needs
 console.log("Hello " + yourName());
}

helloFriend(thisName); // the function expression as an argument

Similar to the previous example, you shouldn’t use () on the argument. Otherwise, the function will execute right away and you’ll get an error.

Using Inline Functions

Instead of defining your functions separately, you can just place it directly on the function call. Here’s how to do that.

function helloFriend(yourName) { // yourName is a placeholder for the actual data the function needs
 console.log("Hello " + yourName());
}

helloFriend(function() {
  return "Bowser";
});

If you won’t be using the callback function anywhere else on your code, you can just write it inline to save some lines of code. Functionally, it is similar to the other examples.

Bonus Example

Remember when I told you not to use () on the call? Well, don’t do that still. However, here is an example of when you can use it.

function name() {
 return anotherFunction;
}

function anotherFunction() {
 return "Mario";
}

function helloFriend(yourName) { // yourName is a placeholder for the actual data the function needs
 console.log("Hello " + yourName());
}

helloFriend(name()); // the function name as an argument

As you see here, when we call helloFriend, we pass name() to it. That executes right away and gives helloFriend the function anotherFunction. Since we didn’t add () to that, the function definition is passed.

That then gets passed to helloFriend.

The result is this print out on the console.

Hello Mario

Until next time!