Understand Callback function in JavaScript.
The first thing you have to understand is that in JavaScript functions are the first class object which means like other object we can pass function as a argument to other to other function and we can assign function to a variable and also we can return a function from other function.
What is callback function —
Function which are passed as a argument to other function and can be called later after some time is known as callback function . The function which accept other function as a argument is called high order function which basically contain the logic when to call the callback function.
Let’s understand it with examples —
function sum(num1,num2){
return num1+num2}function calculate(num1,num2,sum){ //sum is the call back function return sum(num1,num2); }
var result = calculate(5,6,sum);
console.log(result); // 11
It is always better to check the type of callback function that if it is function or not. In the above example we are not checking the type of sum function.
function sum(num1,num2){
return num1+num2}function calculate(num1,num2,sum){ //sum is the call back function
if(typeof sum === 'function'){
return sum(num1,num2); }}
var result = calculate(5,6,sum);
console.log(result); // 11
Use of callback function —
In the above example you see calculate function which does nothing that takes time , it simply call the callback function ( i.e sum) immediately , this type of operation are synchronous operation. But this does not happen always , for example when we request for data from server or external API we don’t know when our data will be served back.In these situation we have to wait for the response but we don’t want our application to be freeze.We want every functionality should work as it is and when we get data from the server it will reflect on the application.So Callbacks are very useful in this type of situation.
Let’s understand with example —
function getDataFromServer(callback){ setTimeout(function(){ callback();
},10000)
}function personDetails(){console.log("PersonDetails are available to use ");
}getDataFromServer(personDetails); //PersonDetails are available to use
Here I am demonstrating server request using setTimeout function which simply execute a function after specified time.
In the above example getDataFromServer execute callback function after 1 s , So when the data are available we can callback function to perform the task which depend on that data.
this within callback function —
this is a special keyword inside each function and the value of this depends on how the function was called not on how or where it was defined.
When callback function are using this object we have to modify how we call the callback function otherwise it will point to window object if passed in global function.
var student = {age:22,
fullName:'Not Set',
setFullName : function(firstName,lastName){
this.fullName = firstName+' '+lastName;
}
}function userInput(firstName,lastName,callback){callback(firstName,lastName);
}userInput('satyendra','kannaujiya',student.setFullName);console.log(student.fullName); //Not Set
console.log(window.fullName); //satyendra kannaujiya
In the above example callback function will not set the fullnName of object student because userInput is a global function and value of this in global scope is window .
We can use call or apply to preserve this.The first parameter of the call and apply is the value of this or the calling object.
var student = {age:22,
fullName:'Not Set',
setFullName : function(firstName,lastName){
this.fullName = firstName+' '+lastName;
}
}function userInput(firstName,lastName,callback, object){callback.call(object,firstName,lastName)
}userInput('satyendra','kannaujiya',student.setFullName, student);console.log(student.fullName); //satyendra kannaujiyaconsole.log(window.fullName); //undefined
