Anatomy of call back functions in JavaScript

Call back function is a pattern that heavily used in JavaScript programming. Most of beginners in JavaScript programming have no clear idea about JavaScript programming. Specially Programmers from other programming paradigms except functional programming facing difficulties in adapting this idea.

JavaScript is a functional programming language. So functions are considered as first class objects. There for we can do may things with functions that can't be done in other programming languages. 

Like,

• Store functions in a variable.
• Pass functions a arguments to another function. 

What is a Call back function

 A call back function is,

• passed as an argument to another function.
• It is invoked after some kind of event.

So basically Call back function is a function (func1) that pass to another function (func2) to be executed after finish the execution of second function (func2).

How to use call back functions

$(document).ready(function(){
    $("p").hide("slow");
    alert("stop");    
});

In this code snippet JQuery is used to hide the paragraph ("p" element) slowly. But before finishing the hiding event JavaScript engine will execute the code for alert the message. So we can use a call back function to alert the message after hiding the paragraph.

$(document).ready(function(){
    $("p").hide("slow",function(){
        alert("stop");   
    });     
});

You can see i'm passing a function as an extra parameter to the hide() method. So it will execute after finish the hiding paragraph.

That call back function is executed after hiding the message because JQuery hide() method is implemented to take a call back function.

Anatomy of a Call back function 

Lets implement an our own function that can accept a call back function.

function register(name,callback){
    $("p").html("Hello "+name);
    
    if(callback && typeof(callback)==='function'){
        callback();
    }
}

This function check whether the final argument is function or not and if it is a function it will be executed. Lets call that function with a call back function.

$(document).ready(function(){
    register("Adam",function(){
        alert("successfully registered");
    })            
}); 

Refer this video to understand how call back functions are called with event loop.

Examples for call back functions used in JavaScript

1. This is a example of how call backs are used in JQuery. So function passed as a parameter will execute after detecting a click 

   
   $(".btn").click(function() {
     alert("Button Clicked");
   });
   

   
   
2. This is how a call back pattern is implemented in JavaScript forEach() method and function passed as a parameter will execute in each loop.

   
   var names = ["Ann", "Stacy", "Jane", "Andy"];
   ​
   names.forEach(function (eachName, index){
   console.log(index + 1 + ". " + eachName); 
   });
   
   

   
   

Please add a comment if this was useful or you have something to add.