How to use map function and arrow function inside another function?

Question

I'm trying to obtain the max heart rate given an array of years by implementing a few functions. The arrayCalc function uses a for loop on a empty array called "arrRes" to push a new value. At the same time, the calcAge function calculates the age of a person from the current year. Instead of the for loop I wish to use the .map and the arrow functions inside of the arrayCalc function which has some arguments passed. I do not know where to go about this.

I've tried using resources like MDN web doc to clarify what a .map and arrow functions. As soon as I know its syntax and its implementation, I started to wrap the .map and the arrow function into a constant variable called "arrRes". Basically, I'm trying to reproduce the same result given in the 'old' arrayCalc.

const years = [1990, 1965, 1937, 2005, 1998];

// The function I'm trying to replicate

function arrayCalc(arr, fn) {
  const arrRes = [];
  for (let i = 0; i < arr.length; i++) {
    arrRes.push(fn(arr[i]));
  }
  return arrRes;
}

// My attempt to shorten the arrayCalc function using .map and the arrow

/* function arrayCalc(arr, fn){
  const arrRes = arr.map(arry => arry);
} */


function calcAge(ex) {
  return new Date().getFullYear() - ex;
}

function maxHeartRate(ex) {
  const result_2 = Math.round(206.9 - (0.67 * ex))
  return (ex >= 18 && ex <= 81 ? result_2 : -1)
}

const ages = arrayCalc(years, calcAge);
const heartRate = arrayCalc(ages, maxHeartRate);

console.log(ages);
console.log(heartRate);

My output should be // [29, 54, 82, 14, 21]. But the console is given me an error "Uncaught TypeError: Cannot read property 'map' of undefined". Obviously, the code I'm trying to implement is commented out to produce the result. Any help is appreciated.

Answer 1

You have missing to return a value from your function and also you should return the value from executing fn function and not arr :

function arrayCalc(arr, fn){
  const arrRes = arr.map(a => fn(a)); // and not .map(arr => arr)
  return arrRes; // missing return statement
}

Working example:

const years = [1990, 1965, 1937, 2005, 1998];

// The function I'm trying to replicate

/*function arrayCalc(arr, fn) {
  const arrRes = [];
  for (let i = 0; i < arr.length; i++) {
    arrRes.push(fn(arr[i]));
  }
  return arrRes;
}*/

// My attempt to shorten the arrayCalc function using .map and the arrow

function arrayCalc(arr, fn){
  const arrRes = arr.map(a => fn(a));
  return arrRes;
  // OR
  // return arr.map(fn);
}


function calcAge(ex) {
  return new Date().getFullYear() - ex;
}

function maxHeartRate(ex) {
  const result_2 = Math.round(206.9 - (0.67 * ex))
  return (ex >= 18 && ex <= 81 ? result_2 : -1)
}

const ages = arrayCalc(years, calcAge);
const heartRate = arrayCalc(ages, maxHeartRate);

console.log(ages);
console.log(heartRate);

Answer 2

You could take the function as parameter for mapping.

function arrayCalc(arr, fn) {
    return arr.map(fn);
}

const years = [1990, 1965, 1937, 2005, 1998];

function arrayCalc(arr, fn) {
    return arr.map(fn);
}

function calcAge(ex) {
  return new Date().getFullYear() - ex;
}

function maxHeartRate(ex) {
  const result_2 = Math.round(206.9 - (0.67 * ex))
  return (ex >= 18 && ex <= 81 ? result_2 : -1)
}

const ages = arrayCalc(years, calcAge);
const heartRate = arrayCalc(ages, maxHeartRate);

console.log(ages);
console.log(heartRate);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Or take a shorter apporoach using Array#map directly with the callback.

function calcAge(ex) {
    return new Date().getFullYear() - ex;
}

function maxHeartRate(ex) {
    const result_2 = Math.round(206.9 - (0.67 * ex))
    return ex >= 18 && ex <= 81 ? result_2 : -1;
}

const years = [1990, 1965, 1937, 2005, 1998];
const ages = years.map(calcAge);
const heartRate = ages.map(maxHeartRate);

console.log(ages);
console.log(heartRate);

.as-console-wrapper { max-height: 100% !important; top: 0; }