How passing a function as argument is working here?

Question

var years = [1990, 1965, 1937];
     
  function arrayCalc(arr, fn) {
    var arrRes = [];
    for (var i = 0; i < arr.length; i++) {
      arrRes.push(fn(arr[i]));
    }
    return arrRes;
  }

  function calculateAge(el) {
    return 2017 - el;
  }

  var ages = arrayCalc(years, calculateAge);
  console.log(ages);

How this code is working, I am new to javascript can anyone break it down and make it simple for me.

Does this answer your question? [How to explain callbacks in plain english? How are they different from calling one function from another function?](https://stackoverflow.com/a/9652434/4642212). Also see [How are callbacks coded in Javascript, behind the scenes?](https://stackoverflow.com/q/58462670/4642212). — Sebastian Simon, May 13 '20 at 17:50

score 0 · Answer 1 · edited May 13 '20 at 17:52

Function are first-class objects in JavaScript. So, like objects, other functions can also be passed as an argument to higher-order functions. A callback function is just called back at a later time. In this case arrayCalc is a higher-order function and fn is a callback function. fn expects an argument. The first parameter of the higher-order function is passed as an argument to the callback function.

Gryso · Accepted Answer · 2023-08-21T16:31:50.090

arrayCalc function takes two parameters:

arr - Array you want to do calculation on
fn - This is another function representing the calculation you want to do on elements of the arr. It is ussualy refered to as callback function

callback function is function that you send as a argument to another function. In your case main function is arrayCalc and callback function is calculateAge

Main function ussually invokes(uses) callback function on the other parameter. That would be array years in your example.

So your main function goes trought elements of you array and invokes callback funcion with that element as a argument and save result to the new array that is then returned from your 'main function'

I will try to make it more clear by rewording your example:

function arrayCalc(parameterArray, parameterCallbackFunction) {
  // create new array for results of calling callback
  var newArray = [];
  // goes trough the array
  for (var indexOfElement = 0; indexOfElement < parameterArray.length; indexOfElement++) {
   // this is callbackFunction invocation with element of array as argument: parameterCallbackFunction(parameterArray[indexOfElement])
   // and we put the resul to the newArray by push method
   newArray.push(parameterCallbackFunction(parameterArray[indexOfElement]));
  }
  // at the end we return newArray filled with results of calling callbackFunction on array   
  return newArray;
}

// this is array we want to change using callbackFunction
var argumentArray = [1990, 1965, 1937];

// this is our callback function  
function argumentCallbackFunction(elementFromArray) {
  return 2017 - elementFromArray;
}

// this is invocation of our main function
// first parameter is array and second is our callback function
var ages = arrayCalc(argumentArray, argumentCallbackFunction);
console.log(ages);

You can create many more callback function and use them in arrayCalc

// this is second callbackFunction
function addTenToYear(elementFromArray) {
  return elementFromArray + 10;
}

// invocation arrayCalc with second callback function
var agesAfterAddition = arrayCalc(originalArray, addTenToYear);
console.log(agesAfterAddition); // [2000, 1975, 1947]


// this is third callbackFunction
function substractTenFromYear(elementFromArray) {
  return elementFromArray - 10;
}

// invocation arrayCalc with third callback function
var agesAfterSubstraction = arrayCalc(originalArray, substractTenFromYear);
console.log(agesAfterSubstraction); // [1980, 1955, 1927]

Something like this is going on in your code:

var originalArray = [1990, 1965, 1937]
var newArray = []
newArray.push( callbackFunction(1990) ) // 2017 - 1990 = 27
console.log(newArray) // [27]
newArray.push( callbackFunction(1965) ) // 2017 - 1965 = 52
console.log(newArray) // [27, 52]
newArray.push( callbackFunction(1937) ) // 2017 - 1937 = 80
console.log(newArray) // [27, 52, 80]

Oh, So here fn is not actually the callback function, it is just referring to another function that is calculateAge?? — Devender Sharma, May 13 '20 at 18:33
@DevenderSharma `fn` is representation of callBack function you put in as parameter. You can create many many callBack functions and then pas them to `arrayCalc` and do different calculations. You can do one when you add years to elements in array and one where you subtract from year — Gryso, May 13 '20 at 18:35
function outer() { return function(name) { console.log('Hello ' + name); } } var devender = outer(); devender('rahul'); here how the variable can be a function in the last line, it is working but How? — Devender Sharma, May 13 '20 at 20:12

How passing a function as argument is working here?

2 Answers2