Callback Functions In JavaScript

This article revolves around the questions on callback function, like what a callback function is and when to use a callback function.

Callback functions

 

This article will revolve around the below questions:

1. What is a callback function?
2. Syntax of the callback function
3. When to use a callback function?
4. Best practices

What is a Callback function?

 

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. Implementing callback is also called the callback pattern.

 

Syntax

function outerFunction(callbackFunction) {
     //Some code here
     callbackFunction();
}
function callbackFunction(){
     //some code here
}

When to use a callback function?

 

1. Synchronous callback functions

 

These functions are used to make the code more versatile.

 

For example, you can perform different operations on data after getting the input from the user.

function getNumbersFromUser(callbackFunction){
     //some code here
     //Numbers a,b received from a user
     var a = 4, b = 5;
     callbackFunction(a,b);
}
function multiplication(a,b){
     document.write("Multiplication is : "+a*b);
}
//Can perform multiple operations on the same number set.
getNumbersFromUser(multiplication);
//OR
function addition(a,b){
     document.write("Addition is : "+(a+b));
}
//Can perform addition operations on the same number set by just changing callback function.
getNumbersFromUser(addition);

The above series of operations can be performed without a callback function in the following ways.

//Call function within another function
function getNumbersFromUser(){
     //some code here
     //Numbers a,b received from a user
     var a = 4, b = 5;
     multiplication(a,b);
}
function multiplication(a,b){
     document.write("Multiplication is : "+a*b);
}
getNumbersFromUser();

//------------OR-----------------

function getNumbersFromUser(){
     //some code here
     //Numbers a,b received from a user
     var a = 4, b = 5;
     addition(a,b);
}
function addition(a,b){
     document.write("Addition is : "+(a+b));
}
getNumbersFromUser();

In the above code snippet, either multiplication or addition operation is mandatory to perform. However, extending the functionality is difficult.

//Call function after another function
function getNumbersFromUser(){
    //some code here
    //Numbers a,b received from a user
    var a = 4, b = 5;
}
function multiplication(a,b){
     document.write("Multiplication is : "+a*b);
}
function addition(a,b){
     document.write("Addition is : "+(a+b));
}
//Can perform multiple operations on the same number set.
getNumbersFromUser();
multiplication(a,b);
//------------OR-----------------
addition(a,b);

 

In the above code snippet, extending the functionality is easy. However, it is dependent on the developer's choice to perform actions. In the above example, if the developer doesn’t call multiplication/addition function, there will not be any output of code.

 

Moral - If you want to enforce a certain set of activities with versatile code, use callback functions.

 

2. Asynchronous callback functions

 

If you want to operate on data fetched asynchronously/execute a function after a certain time, a callback is your friend. JavaScript uses a callback in the following scenarios.

1. AJAX call: CRUD operations on data from the server
2. CRUD operations on data from the file
3. Event listeners
4. Timeout methods : setTimeout, setInterval

Below is a simple demonstration of how callback is used in AJAX call.

$.ajax({
url: "valid_API_endpoint",
success: operationAfterSuccess
});
//This will execute if data fetched successfully from given URL
function operationAfterSuccess(result)
{
     //some code here
}

Best Practices

 

1. Make sure the callback is a function before execution.

function outerFunction(callbackFunction) {
    //Some code here
    if(typeof callbackFunction === "function")
         callbackFunction();
}
function callbackFunction(){
    //some code here
}

2. Chaining anonymous callback functions one after another leads to callback hell. So, always use named functions instead of an anonymous one.