- What is a callback function?
- Anonymous callback function
- Types of callback function
How to create a callback function?
Creating a callback function is simple just create a normal function and pass the reference of the function in another function as an argument.
Possible mistake: pass just the name of the function and don't use parenthesis with it.
Right: calculate(a, b, sum);
calculate(a, b, sum());
Let's create a calculate function that accepts a callback function and on the basis of that callback function it will add or subtract numbers.
In the above example, the calculate function takes sum as an argument which becomes a callback function here and then calls it inside the calculate function, and the same happens for subtract function.
Note: Both regular function and arrow function can be served as a callback function.
There are many array methods that use callback functions to perform some task for individual elements of array-like in map, filter, find, etc.
Let's take an array of some user's name and you have to greet them all using a greet function. How will you do it?
One method is to call the greet function for each element using for loop, or you can use the
map method and pass the greet function as a callback in it.
map method will itself call the greet function for each and every element of the array.
Note: The function that accepts another function as an argument are known as a higher order function, i.e. calculate and map method used above are higher order function.
One important thing to look out for is that it is the responsibility of higher order function to invoke the callback function and provide it with the right argument.
Look at the above examples, the higher order function calculate() and user.map() invokes the callback function with the right argument.
The user.map() function pass elements of the array and also calls it.
Anonymous Callback Function
It is not necessary to create a function then pass it to the higher order function, you can directly create an anonymous function replacing the argument position.
Here is an example of an anonymous callback function.
In the above example, we passed an anonymous function that takes an individual element as an argument and performs a specified task over it.
You can also use the arrow function at this place.
Types of callback function
The callback function can be executed in both synchronous and asynchronous ways.
Synchronous callback function
The callback function is used in asynchronous programming but all callback function does not execute in a synchronous way. A block of code that executes one by one is synchronous.
Here is an example of a synchronous callback function.
You can see by running the above example, Synchronous callbacks are blocking. This means the higher order function finishes its execution only after callbacks have finished its execution.
Order of execution:
- Higher order function starts execution.
- Callback function executes
- Higher order function finishes execution.
Asynchronous callback function
The asynchronous callback functions are non-blocking means the higher order function does not wait for the execution of the callback function but it make sure of the execution of the callback function on a certain event.
When the result arrives then it executes a callback function which is asynchronous callback function.