Add an arrow function to a Javascript array

Issue

I’ve got an array that holds a list of arrow functions with their parameters. Working as intended with the exception of one thing. I’ve got an input field on a web page where I can enter in the text for a new arrow function and then click a button to add it to the array. The challenge is that it gets added as a string instead of a function so the compiler throws an error when it runs the function that uses this array of functions. Error is TypeError: this.functionlist[i] is not a function.

//I have a list of functions that I've pre-defined
functionlist = [
  () => functionA(parameterA, parameterB),
  () => functionB(parameterC, parameterD)
]

//I 'unpack' these functions and run them in another function
runAllFunctions() {
  for (let i = 0; i < functionlist.length; i++) {
    functionlist[i]()
  }
}

// I have some HTML code that uses a simple input field to capture the value of another arrow function and add it to the functionlist
//The input would be something like () => functionC(parameterE, parameterF)
//Have logic on the page to capture the input value and 'push' it to functionlist
//Value capture and push is working fine with the exception that I can clearly see that it's being added as a string whereas the other values in the array are of type function

I believe the root of the issue is that the input is being captured from an HTMLInputElement and I need to somehow transform it into type function before pushing it into my array. It’s in TypeScript (Angular) and I’ve tried a few things (as etc.) but no luck yet. Any thoughts would be appreciated, and also open to alternate approaches to being able to achieve the same goal of storing functions with parameters and then calling those later.

Solution

You can do something like this if that works:

const creatFunc = (param1, param2) => {
   return function () {
     // do things here
     return `${param1}, ${param2}`;
   };    
};

const tempArr = [];

tempArr.push(creatFunc(1, 2));

console.log(tempArr[0]());

You can take advantage of closure to save the params and execute in future.

Answered By – Apoorva Chikara

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0