Understand JavaScript Callback Functions and Use Them

(Learn JavaScript Higher-order Functions, aka Callback Functions)

In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, etc.) since they are in fact objects themselves. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”1.

Receive Updates

Email Address :

Because functions are first-class objects, we can pass a function as an argument in another function and later execute that passed-in function or even return it to be executed later. This is the essence of using callback functions in JavaScript. In the rest of this article we will learn everything about JavaScript callback functions. Callback functions are probably the most widely used functional programming technique in JavaScript, and you can find them in just about every piece of JavaScript and jQuery code, yet they remain mysterious to many JavaScript developers. The mystery will be no more, by the time you finish reading this article.

Callback functions are derived from a programming paradigm known as functional programming. At a fundamental level, functional programming specifies the use of functions as arguments. Functional programming was—and still is, though to a much lesser extent today—seen as an esoteric technique of specially trained, master programmers.

Fortunately, the techniques of functional programming have been elucidated so that mere mortals like you and me can understand and use them with ease. One of the chief techniques in functional programming happens to be callback functions. As you will read shortly, implementing callback functions is as easy as passing regular variables as arguments. This technique is so simple that I wonder why it is mostly covered in advanced JavaScript topics.

What is a Callback or Higher-order Function?

A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction. A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern.

Consider this common use of a callback function in jQuery:

//Note that the item in the click method's parameter is a function, not a variable.
//The item is a callback function
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});

As you see in the preceding example, we pass a function as a parameter to the click method. And the click method will call (or execute) the callback function we passed to it. This example illustrates a typical use of callback functions in JavaScript, and one widely used in jQuery.

Ruminate on this other classic example of callback functions in basic JavaScript:

Again, note the way we pass an anonymous function (a function without a name) to the forEach method as a parameter.

So far we have passed anonymous functions as a parameter to other functions or methods. Lets now understand how callbacks work before we look at more concrete examples and start making our own callback functions.

How Callback Functions Work?

We can pass functions around like variables and return them in functions and use them in other functions. When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function in the parameter. In other words, we aren’t passing the function with the trailing pair of executing parenthesis () like we do when we are executing a function.

And since the containing function has the callback function in its parameter as a function definition, it can execute the callback anytime.

Note that the callback function is not executed immediately. It is “called back” (hence the name) at some specified point inside the containing function’s body. So, even though the first jQuery example looked like this:

//The anonymous function is not being executed there in the parameter.
//The item is a callback function
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});

the anonymous function will be called later inside the function body. Even without a name, it can still be accessed later via the arguments object by the containing function.

Callback Functions Are Closures
When we pass a callback function as an argument to another function, the callback is executed at some point inside the containing function’s body just as if the callback were defined in the containing function. This means the callback is a closure. Read my post, Understand JavaScript Closures With Ease for more on closures. As we know, closures have access to the containing function’s scope, so the callback function can access the containing functions’ variables, and even the variables from the global scope.

Basic Principles when Implementing Callback Functions

While uncomplicated, callback functions have a few noteworthy principles we should be familiar with when implementing them.

Use Named OR Anonymous Functions as Callbacks
In the earlier jQuery and forEach examples, we used anonymous functions that were defined in the parameter of the containing function. That is one of the common patterns for using callback functions. Another popular pattern is to declare a named function and pass the name of that function to the parameter. Consider this:

Pass Parameters to Callback Functions
Since the callback function is just a normal function when it is executed, we can pass parameters to it. We can pass any of the containing function’s properties (or global properties) as parameters to the callback function. In the preceding example, we pass options as a parameter to the callback function. Let’s pass a global variable and a local variable:

Make Sure Callback is a Function Before Executing It
It is always wise to check that the callback function passed in the parameter is indeed a function before calling it. Also, it is good practice to make the callback function optional.

Let’s refactor the getInput function from the previous example to ensure these checks are in place.

function getInput(options, callback) {
allUserData.push(options);
// Make sure the callback is a function
if (typeof callback === "function") {
// Call it, since we have confirmed it is callable
callback(options);
}
}

Without the check in place, if the getInput function is called either without the callback function as a parameter or in place of a function a non-function is passed, our code will result in a runtime error.

Problem When Using Methods With The this Object as Callbacks
When the callback function is a method that uses the this object, we have to modify how we execute the callback function to preserve the this object context. Or else the this object will either point to the global window object (in the browser), if callback was passed to a global function. Or it will point to the object of the containing method.
Let’s explore this in code:

// Define an object with some properties and a method
// We will later pass the method as a callback function to another function
var clientData = {
id: 094545,
fullName: "Not Set",
// setUserName is a method on the clientData object
setUserName: function (firstName, lastName) {
// this refers to the fullName property in this object
this.fullName = firstName + " " + lastName;
}
}
function getUserInput(firstName, lastName, callback) {
// Do other stuff to validate firstName/lastName here
// Now save the names
callback (firstName, lastName);
}

In the following code example, when clientData.setUserName is executed, this.fullName will not set the fullName property on the clientData object. Instead, it will set fullName on the window object, since getUserInput is a global function. This happens because the this object in the global function points to the window object.

Use the Call or Apply Function To Preserve this
We can fix the preceding problem by using the Call or Apply function (we will discuss these in a full blog post later). For now, know that every function in JavaScript has two methods: Call and Apply. And these methods are used to set the this object inside the function and to pass arguments to the functions.

Call takes the value to be used as the this object inside the function as the first parameter, and the remaining arguments to be passed to the function are passed individually (separated by commas of course). The Apply function’s first parameter is also the value to be used as the this object inside the function, while the last parameter is an array of values (or the arguments object) to pass to the function.

This sounds complex, but lets see how easy it is to use Apply or Call. To fix the problem in the previous example, we will use the Apply function thus:

//Note that we have added an extra parameter for the callback object, called "callbackObj"
function getUserInput(firstName, lastName, callback, callbackObj) {
// Do other stuff to validate name here
// The use of the Apply function below will set the this object to be callbackObj
callback.apply (callbackObj, [firstName, lastName]);
}

With the Apply function setting the this object correctly, we can now correctly execute the callback and have it set the fullName property correctly on the clientData object:

// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object
getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
// the fullName property on the clientData was correctly set
console.log (clientData.fullName); // Barack Obama

We would have also used the Call function, but in this case we used the Apply function.

Multiple Callback Functions Allowed
We can pass more than one callback functions into the parameter of a function, just like we can pass more than one variable. Here is a classic example with jQuery’s AJAX function:

“Callback Hell” Problem And Solution

In asynchronous code execution, which is simply execution of code in any order, sometimes it is common to have numerous levels of callback functions to the extent that you have code that looks like the following. The messy code below is called callback hell because of the difficulty of following the code due to the many callbacks. I took this example from the node-mongodb-native, a MongoDB driver for Node.js. [2]. The example code below is just for demonstration:

You are not likely to encounter this problem often in your code, but when you do—and you will from time to time—here are two solutions to this problem. [3]

Name your functions and declare them and pass just the name of the function as the callback, instead of defining an anonymous function in the parameter of the main function.

Modularity: Separate your code into modules, so you can export a section of code that does a particular job. Then you can import that module into your larger application.

Make Your Own Callback Functions

Now that you completely (I think you do; if not it is a quick reread :)) understand everything about JavaScript callback functions and you have seen that using callback functions are rather simple yet powerful, you should look at your own code for opportunities to use callback functions, for they will allow you to:

Do not repeat code (DRY—Do Not Repeat Yourself)

Implement better abstraction where you can have more generic functions that are versatile (can handle all sorts of functionalities)

Have better maintainability

Have more readable code

Have more specialized functions.

It is rather easy to make your own callback functions. In the following example, I could have created one function to do all the work: retrieve the user data, create a generic poem with the data, and greet the user. This would have been a messy function with much if/else statements and, even still, it would have been very limited and incapable of carrying out other functionalities the application might need with the user data.

Instead, I left the implementation for added functionality up to the callback functions, so that the main function that retrieves the user data can perform virtually any task with the user data by simply passing the user’s full name and gender as parameters to the callback function and then executing the callback function.

In short, the getUserInput function is versatile: it can execute all sorts of callback functions with myriad of functionalities.

// First, setup the generic poem creator function; it will be the callback function in the getUserInput function below.
function genericPoemMaker(name, gender) {
console.log(name + " is finer than fine wine.");
console.log("Altruistic and noble for the modern time.");
console.log("Always admirably adorned with the latest style.");
console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}
//The callback, which is the last item in the parameter, will be our genericPoemMaker function we defined above.
function getUserInput(firstName, lastName, gender, callback) {
var fullName = firstName + " " + lastName;
// Make sure the callback is a function
if (typeof callback === "function") {
// Execute the callback function and pass the parameters to it
callback(fullName, gender);
}
}

Call the getUserInput function and pass the genericPoemMaker function as a callback:

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// Output
/* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/

Because the getUserInput function is only handling the retrieving of data, we can pass any callback to it. For example, we can pass a greetUser function like this:

We called the same getUserInput function as we did before, but this time it performed a completely different task.

As you see, callback functions afford much versatility. And even though the preceding example is relatively simple, imagine how much work you can save yourself and how well abstracted your code will be if you start using callback functions. Go for it. Do it in the monings; do it in the evenings; do it when you are down; do it when you are k

Note the following ways we frequently use callback functions in JavaScript, especially in modern web application development, in libraries, and in frameworks:

For asynchronous execution (such as reading files, and making HTTP requests)

In Event Listeners/Handlers

In setTimeout and setInterval methods

For Generalization: code conciseness

Final Words

JavaScript callback functions are wonderful and powerful to use and they provide great benefits to your web applications and code. You should use them when the need arises; look for ways to refactor your code for Abstraction, Maintainability, and Readability with callback functions.

See you next time, and remember to keep coming back because JavaScriptIsSexy.com has much to teach you and you have much to learn.

Thanks for this! Callbacks have always been a little confusing for me to understand but you have laid it out so simply. I especially love the last two examples that demonstrate how callbacks can be simple and still very powerful to abstract out the code. I’ve been reading your other posts and you are doing a great job of communicating topics like OOP, closures, prototypal inheritance, scope, etc. Not coming from a CS background and wanting to learn JS, these topics have been intimidating to understand and when I search for help on them the explanations are always too technical. I like how you use simple and concise examples like “Hello ” and “aFruit inherits from otherFruit”. So thank you very much and keep up the great work!

Bobby,
The “this” you are inquiring about is referring to the window object, which is the global window object that all the code is defined on.

In the apply function, the first argument sets the use of the “this” keyword. So this line:
f.apply(this, arguments);
is saying: call the f function and use the window object as the this keyword inside the f function. Also, pass to the f function the arguments passed into the not function.

Here is a slight modification of the code that shows reveals the detail:

I am an experienced javascript developer and find your articles excellent as they cover much of the fine nuances and details of Javascript that are fundamental to its understanding and yet overlooked / ignored by so many (myself included)

Congratulations and keep up the good work (as i’ll be coming back regularly

Very nice website, and your explanations are pretty clear. However I’m sorry to inform you, what you are talking about are not true Callbacks. These are essentially call forwards, ie. telling one routine the name (or in C the pointer) to another routine to call. A true Callback is an asynchronous device used to tell the compiler where to route the response back to the requesting program. In fact a true Callback is never explicitly called by the programmer, the compiler will actually engineer the connection.

Depending on your perspective, you could argue that the event function is an actual Callback routine since in reality, those routines are registered with the OS as event handler functions that need to be responded to by the OS Event Handler and thus the function is called in the event of that Event occurring.

In the event that you don’t understand my description of Event Handling, try Googling “Event Handler”. In any event, have a nice day!

Good series so far. Helps me review some of these core JS concepts in a straightforward, plain English manner. Makes me more comfortable with the concepts, so I appreciate your writing style. That being said, question about this bit of text:

“We would have used the Call function if we only needed to pass a single parameter to the callback function, but since we needed to pass firstName and lastName, we used the Apply function. This is the only difference between Call and Apply.”

This seems to imply that using Call was not an option when in fact you could have used “callback.call (callbackObj, firstName, lastName);” in place of “callback.apply (callbackObj, [firstName, lastName]);”. If you meant that your choice to use Apply was just a preference rather than the only option, do you mind clarifying that in the article for your readers? In any case, thanks for the short and intuitive articles.

Hi, you are doing an amazing job! I learn a lot from your posts. Is it possible to writing an Execution Context and Scope topic post using graphics to illustrate? Like this post style http://howtonode.org/object-graphs. As for as I know, I t will be easier to understand something by graphs. Thanks a lot.

Hi! Thanks for nice post. This is the first post from you blog I’ve read and I didn’t yet read other post (but have subscribed), maybe you plan to write posts about “Default settings” and “Pub-sub” patterns (if not yet), I’m personally very interesting in )

Thank you, Dan. And I know What you mean about the Google search results.

Some of the articles on this blog are ranked very high on Google search results, while some others are not: That is Google’s algorithm at work. I am thankful that they send quite a bit of hits to the blog, though.

Hi all, I have a doubt about jquery function, I have my click function
$(‘#BtnBuscarb’).click(function (param) {
}
And I want to pass a parameter here $(“#BtnBuscarb”).trigger(“click”);
how i can pass my param in this call?

thanks so much for writing this! it’s an excellent article and has clarified callbacks significantly for me. i do have one very ‘stupid’ question. in the example that you gave (copied below), how does the the anonymous function know what the variables ‘eachName’ and ‘index’ refer to since they weren’t declared anywhere?

It is a really great, short and worthy article……
Im searching for months….atlast you I found you
RICHARD it is really helpful for every javascript learner….
Im expecting many more javascript articles from you….

Your explanations are so concise and clear. Keep up the good work! I like the your list for reasons of using callbacks. I had known of callbacks and how to use them but not many articles explained any of the reasons for using them.

Hi
I am also web developer and now coding in asp.net mvc4.Today I have complete your articles on Callback and closure both article is very descriptive and today I can say that yes I have the knowledge about closure and callback.Great works by you.Thanks a lot to write such article.

Thanks for the post, but I’m having trouble with the concept.
in the code:
//Note that the item in the click method’s parameter is a function, not a variable.​
​//The item is a callback function
$(“#btn_1″).click(function() {
alert(“Btn 1 Clicked”);
});

is the callback function “alert(“Btm 1 Clicked”)’ and outer function the “function() {…}” or is the callback function the “function(){…} and the outer function something else [perhaps a method of the window object]?

Just a quick note to those with “Callback Hell”, otherwise known as the “Pyramid of Doom”. You may want to check out another approach which has become popular. Promises: with the Q library, jQuery has also implemented this, and AngularJS with $q. Instead of callback after callback after callback, the function returns a promise and what is returned from the asynchronous function is passed the promise then() or catch() function if a problem arises. The syntax is kinda like this:

I would really like to understand how the parameters in the callback are working in the example you mentioned “eachName, index” these haven’t been specified in a function call but yet the get the values of the array?

Such a wonderful informative and helping article made me able to use Callback functions and do modifications.Before reading it I was just looking at the word “callback” in Javascript and could’nt work on it.

you say that: “it will set fullName on the window object, since getUserInput is a global function”. Ok,
but in the following example I have two local functions (as far as I know they are local) getUserInput2 and getUserInput1, and the result is the same:

“(Learn JavaScript Higher-order Functions, aka Callback Functions)”
“A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) ”

Actually, the enclosing function, what you are calling otherFuntion, is the higher order function. The callback function is never called higher order. Check it yourself.

This is solid gold, Richard. I’m new to JavaScript and you explained this so well that even noobs like me could grasp it. I’m so glad you included the ‘Use the Call or Apply Function To Preserve this’ section too. That would have for sure messed me up somewhere down the road and it would’ve taken me forever to figure out why the callbacks weren’t working.

I just wanted to tell you that “You just made my day today!” Believe me you made my day, today!
I am Java developer and all of a sudden are project requires Javascript knowledge. My JS skills are near zero.
Found JS very hard to learn and understand. Now, i am on the 5th tutorial and enjoying what i am reading/learning from you Awesome explanations. You are direct to the point and easy to understand. Please
keep the great going..

Hello Richard!
Thank you so much for what you have been teaching us. I have read a couple of your articles and I find them extremely helpful. Your explanation is very clear and easy to understand. WOW I’m glad I have found this site. This encourages me to hold on to Javascript. Someone told me to give up. He told me “your code is so bad, so unclear and duplicated, you shouldn’t be doing this”. I was sad and depressed and then I came to realize I have to prove him that he’s so dead wrong about me. I can write clean, maintainable and sexy code. I would be a excellent front-end dev.
Thank you again I wish you best of luck…
Regards,

Hi, in your tutorial “JavaScript Objects in Detail” you have shown an example where mango as native of Central America. It is not. Its a native of (also national fruit) of INDIA. Also the name “mango” comes from an Indian language. This needs to be corrected.

I noticed you used the phrase: “imagine how much work you can save yourself and how well abstracted your code will be if you start using callback functions”

Just a heads up, abstracted means: “showing a lack of concentration on what is happening around one, oblivious, inattentive.” I think a better word may suffice unless the phrase is referencing something I am unaware of.

—————————————-
In the above example, instead of passing clientData.setUserName as parameter and getting it as callback in getUserInput, why can’t we directly use that function inside the getUserInput function like below

Just wanted to mention this important note about the terms Callback functions and High order functions.
They are not the same. Callback functions are the ones that are passed to the ‘other’ functions and the ‘other’ functions that take the callback functions as arguments are the high order functions.

(1) So far we have passed anonymous functions as a parameter to other functions or methods. Lets now understand how callbacks work before we look at more concrete examples and start making our own callback functions.
“Lets” => “Let’s”

(2) This sounds complex, but lets see how easy it is to use Apply or Call. To fix the problem in the previous example, we will use the Apply function thus:
“Lets” => “Let’s”

(3) We can pass more than one callback functions into the parameter of a function, just like we can pass more than one variable. Here is a classic example with jQuery’s AJAX function:
“functions” => “function”