CODEWITHSUNDEEP
javascriptlogic
RONE
RONE

Reputation: 5485

When to use calling javascript functions as parameter and its advantages

I Have learnt a new thing/concept in javascript. calling function using another function as parameter, please have a look at this fiddle examples

Passing function as parameter

ProgressBar(1, 2, function() { flag=true; console.log(' After flag : '+flag);}, flag);

Normal Function.

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.

Upvotes: 1

Views: 149

Answers (3)

Dimensional Sys
Dimensional Sys

Reputation: 498

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.

Upvotes: 2

mohkhan
mohkhan

Reputation: 12335

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]

Upvotes: 0

Quentin
Quentin

Reputation: 944420

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);

Upvotes: 0

Related Questions