Call Back Function Javascript

The call back function is a core concept of asynchronous JS development. To better follow and understand the concept I suggest you code along with this blog so you can test your functions using the example provided and straight your knowledge.

Let’ start with a classic example of a call back function.

This function takes two arguments, the first is a function and the second is the amount of time in a millisecond to wait before the function get called. In this example, the callback function is the one we defined and passed as an argument to set time out.

          () =>{
console.log('two seconds has passed')
}

The call back function is just a function provided as an argument inside another function with the intention to call it later in the future. The above example uses setTimeout with the intention to call the inside function after that time has passed, in this case after 2 seconds.

Point of confusion

A lot of people thinks that every callback pattern used is an asynchrony. This is not true because in the above example setTimeout is a node API asynchronous function, but also forEach and filter are using the callback pattern but nothing asynchronous happen inside these methods

Example of a callback non-asynchronous:

To make more clear our concept we can see the filter method in action here. We created an array of cat’s names and we filtered the cat that has the shorter name. In this example, we are using the callback pattern as the previous one but there is nothing asynchronous happening inside this method, is not interacting with a native node API and it’s just a standard javascript synchronous code.

The benefit of defining your own callback function

The question is why are so important to use the call back function and how this can help us to improve our code. Imagine we have a function “geocode()” that takes as argument a location and give us back some coordinates. Assuming we want to use this function in multiple files in our application let see how the structure of this function using a callback and a non-call back function can impact our functionality.

In this example, we can see that our method will work fine and give as back what we need but it does not perform any asynchronies logic inside. If we would like to implement some delay in the response, for example, using a setTimeout inside this function let’s see what would happen:

If you run the above function your return value will be undefined. The problem is that the main function does not return anything and even if the setTimeout has a return value the main one run immediately and has a return value of undefined because the data returned are inside a nested function. This is why the return pattern is not going to work when we try to do asynchronous action inside the main function.

Using a callback function as an argument

let’s see how this function would perform with a call back function passed as an argument:

In the above example we passed a call back function as the second argument, and instead, to give a return value we passed the data inside the call back function. When we call the function in our app this will perform the Asychrones operation that allows us to get the data we want and perform later on a different operation, for example, call setTimeout and display the data after 2 seconds.

The callback pattern gives us more control on the return value of the function called, and allow us to perform different operation every time we call the function without to be restricted on the return value defined inside the main function. If we want to just perform different operation on the return value we can change it every time we called inside a different file.

In the above example, we defined a function “doSomeCalculation()”, that takes two number and a call back function as arguments. When we call the function below we can perform a different operation with the return value, for example, multiply or divide with a different value every time, without being restricted in defining the operation inside the main function.

I hope this blog helped you to have a more clear idea of why and how we use the call back function in our code.