Add an arrow function to a Javascript array

Question

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.

You can eval it. (Normally this is a bad idea but the whole idea of adding an arrow function from an input field sounds like some experiment, so...) — CherryDT
– CherryDT, Commented Sep 20, 2021 at 6:50
I'm totally open to other more worthy approaches. The use case is storing a list of functions with their parameters so that I can run them at a later time. It's the 'with their parameters' bit that seems to be a bit tricky but if you have any suggestions on a good approach I'd love to hear them! — Artemis J
– Artemis J, Commented Sep 20, 2021 at 6:54
would functionC or other input always be an existing/predefined function? Could you make a dropdown where the user selects functions that can be used? — Me.Name
– Me.Name, Commented Sep 20, 2021 at 7:06

CherryDT · Accepted Answer · 2021-09-20 07:32:00Z

3

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.

edited Sep 20, 2021 at 7:32

CherryDT

29.4k5 gold badges56 silver badges86 bronze badges

answered Sep 20, 2021 at 6:59

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Artemis J Over a year ago

Thank you for taking the time to provide a response. I will give this a try and report back

Apoorva Chikara Over a year ago

Does this help??

Collectives™ on Stack Overflow

Add an arrow function to a Javascript array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related