JavaScript: Callback function

Profile picture for user arilio666

In javascript callback functions are a very cool feature that is used often. A callback function in javascript can call other functions from within a function.

A function is a first-class object as we know where we can pass objects into functions as arguments. In the same way, we can pass other functions into a function as an argument.

Syntax

var func1 = function()
{
    //Body
}

var func2 = function(callback) 
{
    //Body
    callback()
}

func2(func1);

Example

var x = function() 
{
    console.log("Called From Within A Function")
}

var y = function(callB)
{
    console.log('The Callback Function')
    callB()
}

y(x);

Output:

The Callback Function
Called From Within A Function

Here is a simple example of a function x which is a normal function that is accessed via the next function y which was called via the parameter callB and was passed in the function name x within y as the argument. Which in turn called the function within another function.

So this is a simple example of how the callback function is working let us see a calculator example where we can understand how this is used practically in the real scenario.

Example: Calculator

So in a scenario where you wanna use the attribute another function has from a separate function and wanna be accessed via a separate function. We can use a callback in such a scenario.

let addition = function(x, y)
{
    return x + y;
}

let multiplication = function(x, y)
{
    return x * y;
}

let division = function(x, y)
{
    return x / y;
}

let modulus = function(x, y)
{
    return x % y;
}

let calculator = function(num1, num2, callBack)
{
    return callBack(num1, num2)
}

console.log(calculator(10, 5, addition))
console.log(calculator(10, 5, multiplication))
console.log(calculator(10, 5, division))
console.log(calculator(11, 5, modulus))

Output: 

15
50
2
1
  • So here we have addition, multiplication, division, modulus functions each with its unique attributes to perform an arithmetic operation.
  • So here we can do the callback function of accessing every function's attributes from within a master function and perform each function operation separately from one place.
  • The callback function method is ideal to use here in such a place where the body of each function can be accessed via the parameter callBack when passed in with the required function name which we wanna call back.
  • Here, in this case, we have done a simple calculator using callback function where when the respective function is passed onto the callBack parameter as an argument it immediately invokes the function body above which we wanna access.