Hi friends! In this article we going to learn about Callback functions in JavaScript with several examples. Callback functions is also called higher order functions.

In JavaScript functions are called as first class objects.

  1. We can pass object to function as an argument.
  2. We can also pass other functions into function as an argument, to execute at some point.

Simple Example to understand


    let function1 = function(){
        console.log("I'm the function1 result");
    }
    
    
    let function2 = function(callback){
        console.log("I'm the function2 result");
        
        callback();
    }
    
    
    function2(function1);

Output:

I'm the function2 result
I'm the function1 result

It works fine. It is easy to understand, how to pass function as an argument to another functions.

But why do we need this call back in JavaScript?

To understand better, look at the below example which don’t uses call back functions and see how ugly is this.

 let calculate = function(x, y, operation){
      
      if(operation === 'subtract')
          return x - y;
    
      else if(operation === 'divide')
          return x/y;
  }
  
  console.log(calculate(10,3,'subtract'));


Output:
7

This works fine. But lets say this above function calculate is part of some library, for example, jQuery library. And user supposed to use this library, have to pass the number and calculation type to get the result.

Now in order for all possible calculations type, this library has to implement all of it. We may pass add,multiple or it could be some random operations. But this library only supports for two calculations type, subtract and divide.

So what to do? what is the best way to that?

The best way to do that is, make the function as abstract as possible. To make the function as abstract, we need to bring the functionality outside. The function should be generic.

Look at the below example to understand better.

By using callback functions we going to improve the above code. So that you can see the real use of call back functions.

Output: 13

As an user, I can create any function, pass into this library and get the desired result. So, this is the power of callback functions.

I can also to do like this,

Based on my requirement, I can change whatever i can. This above example returns true.

REAL-TIME example

One of the real time example of JavaScript callback function is sort() method.

In the above example, we applied the callback function to JavaScript sort method to sort the array based on keys in ascending order.

Output of above program

4 Love
5 Faith
6 Peace

Lets modify the callback function to sort the array based on keys in descending order.

Output of above program

6 Peace
5 Faith
4 Love

Lets modify the callback function to sort the array based on values in ascending order.

Output of above program

5 Faith
4 Love
6 Peace

Lets modify the callback function to sort the array based on values in descending order.

Output of above program

6 Peace
4 Love
5 Faith

I hope this article helps you to understand well about Callback functions in JavaScript with easy examples. In our next article, we going to learn about Promises in JavaScript with easy examples.

Note:

If you like to receive articles, like above with simple examples at your inbox, please follow me by entering your email id.

Processing…
Success! You're on the list.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s