Using JavaScript to dynamically invoke a function and pass parameters dynamically

Question

Using JavaScript to dynamically invoke a function and pass parameters dynamically

Exploring a dynamic method call with parameters in JavaScript.

let obj = {
  method: 'foo1',
  params: ['one', 'two']
}

foo1(p1, p2) {
 // do something
}

To execute it =>

[obj.method](obj.params)

Is there a way to dynamically add parameters from an array?

javascript arrays object ecmascript-6

Answer 1

Answer №1

Affirmative - distribution (ES6):

window[obj.method](...obj.params);

Ensure that you are calling the function correctly - if you define it with var in the global scope, it will be linked to the window. If not, it will not be reachable at all (unless using eval, but that is considered poor practice).

Answer 2

Affirmative - distribution (ES6):

window[obj.method](...obj.params);

Ensure that you are calling the function correctly - if you define it with var in the global scope, it will be linked to the window. If not, it will not be reachable at all (unless using eval, but that is considered poor practice).

Answer 3

Answer №2

If you want to call a function using a string name, you can use the following method:

window[obj.method](...obj.params)

Here is an example to illustrate this concept:

let obj = {
    method: 'foo1',
    params: ['one', 'two']
}

function foo1(parameter1, parameter2) {
    console.log(parameter1, parameter2)
}

window[obj.method](...obj.params) // output: one two

Answer 4

If you want to call a function using a string name, you can use the following method:

window[obj.method](...obj.params)

Here is an example to illustrate this concept:

let obj = {
    method: 'foo1',
    params: ['one', 'two']
}

function foo1(parameter1, parameter2) {
    console.log(parameter1, parameter2)
}

window[obj.method](...obj.params) // output: one two

Answer 5

Answer №3

If you want a function to be part of an object and then invoke it dynamically using bracket notation [] with the method's name as a string inside the brackets, you can achieve that easily. The spread operator ... is used to convert the parameter array into a list.

While some examples show using the global window object as the parent, keep in mind that it is better to avoid globals and create your own object instead.

In the code snippet below, there are multiple methods and parameter options presented for the user to choose from. This selection process could be handled differently depending on the requirements.

// Store the methods within an object so they can be accessed using bracket notation
// later on.
let obj = {
  method1: function foo1(p1, p2) {
            console.log("method1 was called with: ", arguments);
  },
  method2: function foo1(p1, p2) {
            console.log("method2 was called with: ", arguments);
  },
  params1: ['one', 'two'],
  params2: ['three', 'four'],  
};

// Ask the user for their desired method and parameters:
let choice = prompt("Enter 'method1' or 'method2'");
let args = prompt("Enter 'params1' or 'params2'");

// Retrieve the method by its name (as a string) from the object to get the property value.
// Then call the method using () and access the correct parameter property in a similar manner.
// Use the spread operator (...) to flatten the parameter array.
obj[choice](...obj[args]);

Answer 6

If you want a function to be part of an object and then invoke it dynamically using bracket notation [] with the method's name as a string inside the brackets, you can achieve that easily. The spread operator ... is used to convert the parameter array into a list.

While some examples show using the global window object as the parent, keep in mind that it is better to avoid globals and create your own object instead.

In the code snippet below, there are multiple methods and parameter options presented for the user to choose from. This selection process could be handled differently depending on the requirements.

// Store the methods within an object so they can be accessed using bracket notation
// later on.
let obj = {
  method1: function foo1(p1, p2) {
            console.log("method1 was called with: ", arguments);
  },
  method2: function foo1(p1, p2) {
            console.log("method2 was called with: ", arguments);
  },
  params1: ['one', 'two'],
  params2: ['three', 'four'],  
};

// Ask the user for their desired method and parameters:
let choice = prompt("Enter 'method1' or 'method2'");
let args = prompt("Enter 'params1' or 'params2'");

// Retrieve the method by its name (as a string) from the object to get the property value.
// Then call the method using () and access the correct parameter property in a similar manner.
// Use the spread operator (...) to flatten the parameter array.
obj[choice](...obj[args]);

Using JavaScript to dynamically invoke a function and pass parameters dynamically

Answer №1

Answer №2

Answer №3

Similar questions

Utilize a jQuery class selector to retrieve the value of a textbox through HTMLHelper

Create a JavaScript code snippet that replaces the innerHTML of the function document.getElementById with

Potential issue with Jhipster: loading of data could be experiencing delays

"How can I make a dropdown open and close when a button is clicked, but also close when clicking outside of it at the same

loading preloaded fonts at the optimal moment

How can we capture the current row's value for later retrieval?

When a ng-model is added, the input value disappears

JSF CommandLink malfunctions on Firefox when reRendering an entire form

How can I generate codegen types using typeDefs?

Store the response data in a global variable or forward it to another function in Node.js using Express JS

Is it possible to modify the location of my CSG object prior to performing subtraction in Threejs with ThreeCSG?

Create a customized MUI select component with a label, all without the need for assigning an

Conceal two DIV elements if one of them is empty

The response in Express.js effortlessly transforms keys from snake_case to camelCase

Set my click event handler back to its default setting

What is the best way to link JavaScript files from a Grails plugin in a separate Grails application?

What are some of the techniques for customizing the DOM generated by material-ui in ReactJS?

Which Angular2 npm packages should I be installing?

jQuery fieldset.change is a feature that allows you to manipulate

Dropdown menu utilizing processing API and interacting with AJAX and DOM manipulation