Advantages and Disadvantages of Callbacks in Javascript

What are the Callbacks?

Callback is a function. And we can pass these callbacks function as an argument inside the other functions. As we can pass the different types of arguments or parameter in a function. Similarly we can pass the callbacks as a function argument.And the function which receives that callback as an argument is responsible to handle this callback function. Means when and how to use that argument is now task of that function who is receiving the callback. There are many built in function/method where we can see the callback functions are used. Very known example is setTimeout(). It also takes one callback function.Lets see below code –

setTimeout(function(){
 console.log("Learn With Triveni"); 
}, 5000);

So in the example you can see the dark text is a callback function. Which is passed as a first argument in setTimeout() function. And this callback function will execute after 5000ms.If you want to check whether this function is callback function or not so you just hover on that function when you will write that code. So in info  popup it will show the information about it like below.

Similarly there are so many built in function like forEach, addEventListener etc which takes callback as an argument.

Why we use Callbacks?

• The main advantage of using callback is that you can wait for the previous operations to be completed then only execute the next operation.
• Callbacks are higher order functions so its provides the flexibility to pass the another functions as an arguments.
• Consider the use case where second call is dependent on the response of first call. At that time callback is the most usable thing.
• Callback functions are having access of both , its own scope as well as the scope of the function where it is being called.

Understanding the code without callback

Let’s try to understand below scenario without using callback. After this we will see the same example with callback as well.Lets consider you want to save data into the database and also want to retrieve that data from database.So in this example we will not go with all API stuff. We will simply create one array and push the data into it. And we will retrieve the same array in get call. Suppose we have one product array. Let’s see the code below.

var products = ['Mobile','TV'];
function addProduct(product) {
   setTimeout(function () {
      products.push(product);
  }, 2000)
}

function getProduct() {
  setTimeout(function () {
     console.log("List of Products: "+ products);
  }, 1000)
}

addProduct("Camera");
getProduct();

In this code we have simply created one products array with two values. And also created two functions addProduct() and getProduct(). In addProduct() we are pushing the product after 2000ms. But in getProduct we are getting or printing the products value after 1000ms. And below we are calling addProduct() with one argument i.e camera. And after that calling getProduct(). Let see its output.

As you can see in the output only tow products are displaying. Why this so? Its because asynchronous operations. addProduct() method is taking much time to add the data as compare to getProduct(). Now let’s do the minor change on the code.

var products = ['Mobile','TV'];

function addProduct(product) {
  setTimeout(function () {
    products.push(product);
  }, 1000)
}

function getProduct() {
  setTimeout(function () {
   console.log("List of Products: "+ products);
  }, 2000)
}

addProduct("Camera");
getProduct();

Now if you will run the above code, you will get the different result.

See this time we are getting all three products. Its because we have increase the timing in getProduct() as compare to addProduct(). Means when the getProduct() method will execute till that time addProduct() task has been finished. We can simplify this code by using callback functions. So let’s see the code with callback now.

Understanding the code with callback

Now we will simulate the same code with callback function.

var products = ['Mobile','TV']; 

function addProduct(product, callback) {
  setTimeout(function () { 
     products.push(product); 
     callback();
  }, 2000)
}

 function getProduct() { 
   setTimeout(function () {
     console.log("List of Products: "+ products); 
   }, 1000) 
 } 

 addProduct("Camera", getProduct);

If you will run this code. Here also you will get the all three products.

But this time our code is handled through callback. We have simply passed the getProduct() method inside the addProduct() as  a second argument. And in addProduct(), we have called that callback function after pushing the data into product array.So the main advantage here is that using callback no matter what time the first operation is taking. Callback function will called only after completion of that.

The Problems with Callback

• Callback Hell  – The main disadvantage of using callback is Callback Hell. Callback hell is essentially nested callbacks where each callback is dependent on previous callback.
• Callback hell affects the readability and maintainability of the code.

We will discuss the callback hell separately. But to get rid of callback hell you can use Promises and async/await.