Callback Functions In JavaScript

Callback functions

This article will revolve around the below questions:

What is a callback function?
Syntax of the callback function
When to use a callback function?
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.

AJAX call: CRUD operations on data from the server
CRUD operations on data from the file
Event listeners
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.