What is a Callback Function in Javascript?

A callback function in javascript is a function that is passed as an argument in another function. Which is then called inside the parent function to complete a routine or an action. To put it more simply, it is a function that will be called(executed) later after its parent function(the function in which it is passed as an argument) is done executing.

Let's see an example :

Output :

In the above code, we can see in the function operation the third parameter is a callback function. We are first passing the "callback" as an argument and then calling it inside the parent function $i.e.$, operation. Here, we have taken the "sum" as the callback function, we can create any function and pass it as the callback in the operation function.

Need for Callback Functions

Javascript is a single-threaded language, which means, it executes the code sequentially one line after another. However, there are some cases in which a part of the code will only run after some lines of code, i.e. it is dependent on another function. This is called asynchronous programming.

• We need callback functions to make sure that a function is only going to get executed after a specific task is completed and not before its completion.

  • For instance, in the case of an event listener, we first listen for a specific event, and if the function detects it, then only the callback function is executed. It's just like when you go into a restaurant, the function(action) to make a pizza will only run after you order a pizza. And in the meantime, the restaurant staff(browser or nodeJS) will do some other work.

• Callback functions are also needed to prevent running into errors because of the non-availability of some data that are needed by some other function.

  • For example, when a function fetches some data from an API that takes some time to get downloaded. We use the callback function here so that the function that needs the data will only get executed when all the required data is downloaded.

Nesting Callbacks and Callback Hell

We can nest callback functions as we nest for loops or if-statements. When we have to run a piece of code that is dependent on some other function and that function is also dependent on the result of another function, the nesting of callback functions happens. This way we can run multiple functions that are dependent on some other functions.

See the program below to get more clarity.

In the above example, we can see one callback nested into another callback function.

The above code looks messed up and it will get even messier with the increase in the number of nested callbacks. This situation is called callback hell where the code is messed up due to multiple nested callback functions. This decreases the readability of the code and makes it difficult to edit.

So to avoid this issue we use different techniques like promises, async, and await(syntax coating).

Example :

As you can see the above code does look like hell! There are some ways to prevent callback hell. Let's see them in detail.

a. Using Promises

A Promise is a javascript object that links producing code and consuming code. Producing code is the code that takes some time like getting data from a server. Consuming code is the code that must wait for the result of the producing code.

Refactoring the above code using the promise :

Output :

This looks much cleaner, and easy to read, and edit. This is one of the advantages of using promises in javascript. Use this JavaScript Beautifier to beautify your code.

Let's see javascript promises in a brief :

• A promise has four states :
  • Pending
  • Settled
  • Fulfilled
  • Rejected
• Using these different states a promise does efficient error handling.
  • When the action related to the promise is neither fulfilled nor rejected, it's in a pending state.
  • When the action related to the promise is either fulfilled or rejected, it's in a settled state.
  • When the action related to the promise is executed successfully(resolved), it's in the fulfilled state.
  • When the action related to the promise fails(not resolved) due to some error, it's in the rejected state.
• Using the .then() method we can do further actions like calling another callback function or catching the error.

b. Using Async and Await

Using javascript promise we can prevent callback hell and can catch the errors and respond to them. However, the way of writing promise code is something we are not used to(it's the asynchronous way). Using async and await we can write the asynchronous javascript promises code synchronously. In the background it's still using the whole javascript promise code, this is just a better syntax, easier to understand, and write.

Output :

• In the above code, we use the syntax coating of the async and await.
• We create a function and use the async keyword to tell the browser that we are going write an asynchronous function.
  • After declaring the function async only we can use await.
• We use the await keyword to wait for the callback function to get executed and then only assign value to the local variables.