I Have learnt a new thing/concept in javascript. calling function using another function as parameter, please have a look at this fiddle examples
ProgressBar(1, 2, function() { flag=true; console.log(' After flag : '+flag);}, flag);
ProgressBar(1, 2, flag);
Looking at the console statements i have understood what is the effect, but little confused where will this concept prove much important/useful.
JavaScript is async language and compiler continuously read the next line and do not wait for returning value of the function. So in that case, if our operation depends in some other operation then we cannot achieve this by using simple function in "JavaScript".
Like I say, in creating examination mark-sheet. I need to have total or sum value of all subject's obtained marks. After calculating the total I will be able to calculate percentage and if I don't have total marks then I cannot calc percentage.
Example :
function getObtainedMarks(student_id){
//get the total marks from server and it takes little more time
return obtained_marks;
}
function calcPercentage(obtained_marks,total_marks){
return ((obtained_marks/total_marks)*100);
}
var total_marks = 500; var obtained_marks = getTotalMarks(101);
var percentage = calcPercentage(obtained_marks,total_marks);
in the above example, the final value of percentage would be undefined because when we called getObtainedMarks, it was calculating the total by sending request to server but in the mean time compiler moved to next statement i.e var percentage = calcPercentage(obtained_marks,total_marks);
So, here JavaScript introduces callback functions, we actually bind our operation on some dependent operations.
For Example:
function getObtainedMarks(student_id,callback){
//get the total marks from server and it takes little more time
callback(obtained_marks);
}
function calcPercentage(obtained_marks,total_marks){
return ((obtained_marks/total_marks)*100);
}
var total_marks = 500;
getTotalMarks(101,function(obtained_marks){
var percentage = calcPercentage(obtained_marks,total_marks);
});
In the above example, calcPercentage(obtained_marks,total_marks) will not call until getObtainedMarks callback the value of of obtained_marks. So, this is the difference between these 2 kind of functions in JavaScript and I also posted the example for your guidance.
The most common usecase is where you want a function to be called only after something else has happened.
function andAlertTheUser() { ... }
setTimeout(andAlertTheUser, 5000);
document.addEventListener('click', andAlerttheUser);
xhr.addEventListener('load', andAlertTheUser); xhr.send();
The other is where you have an API that performs an operation on multiple things, and you want that operation to be customisable from any code that calls that API.
function doSomethingToEachItemInTheArray() { ... }
var arr = [1,2,3,4]
arr.forEach(doSomethingToEachItemInTheArray);
Sorting is a good example. For example you may want to have your own sorting logic to sort the Array.
var arr = [20,4, 51, 22, 44];
function sortAsc(a, b){
return a>b ? 1 : -1;
}
arr.sort(sortAsc); // passing your sorting logic as a function to sort method.
console.log(arr); // prints [4,20,22,44,51]
