Asynchronous Javascript - Using Callback Functions in Javascript

Posted by : at

Category : javascript

Ads by Google

What are callback Functions in Javascript

When it comes to dealing with asynchronous development in JavaScript there are many tool you can use. This post explains four of these tools and what their advantages are. These are Callbacks, Listeners, Control Flow Libraries and Promises. In this article we will discuss on using Callback Funtions in Asynchronous Javascript Programming.

Callback Functions

A callback function is a function that is passed as an argument to another function, its a higher order javascript function or First Class. This is the most basic and the best known pattern to deal with async programming. In javascript functions are of the type Object, and therefore it can be stored in variables, passed as arguments to functions , created within functions and returned from functions.

When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function in the parameter.

In other words, we aren’t passing the function with the trailing pair of executing parenthesis () like we do when we are executing a function.

And since the containing function has the callback function in its parameter as a function definition, it can execute the callback anytime.

Note that the callback function is not executed immediately. It is “called back” (hence the name) at some specified point inside the containing function’s body

Callback funtions help in many ways :

  • Do not repeat code (DRY—Do Not Repeat Yourself)
  • Implement better abstraction where you can have more generic functions that are versatile (can handle all sorts of functionalities)
  • Have better maintainability
  • Have more readable code
  • Have more specialized functions.

Suppose we need to create a calculator function, we can define the calculator function, by passing two numbers and callback (a function) as a parameter.

// callback function
function calculator(num1, num2, callback){

    if(typeof callback === "function") {

 	   const result = callback(num1, num2);
    	   console.log('The result is: ', result);

Then we can define the individual functions for this callback to return :

Define the callback functions :

// multiply
function multiply(num1, num2){
  const result = num1 * num2;
  return result;

// addition
function addition(num1, num2){
  const result = num1 + num2;
  return result;

// substraction
function substraction(num1, num2){
  const result = num1 - num2;
  return result;

Then finally you can execute the calculator function by passing the numbers and the function you want to execute for the callback, like this :

calculator(1,2, multiply);     // 2
calculator(1,2, addition);     // 3
calculator(1,2, substraction); // -1

Sometimes we might fall in trouble, because of Callback Hell. You can read on how to prevent Callback Hells here and sometimes

Alternatives to callbacks

Callback programming can be real pain, so that time we can use other Control flow libraries like async.js, do.js , promises etc.

Starting with ES6, JavaScript introduced several features that help us with asynchronous code that do not involve using callbacks:

  • Promises(ES2015)
  • Async/Await(ES2017)

And that’s it hope you understand the use case of Callback functions now a bit ! Give it a try :D

Ads by Google