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

Get started by setting up and utilizing react version 0.14.0 on your

What is the best way to verify the existence of an email address?

Tips for enhancing undo/redo functionality when working with canvas drawings in React

What could be causing the recurring appearance of the success alert message in an AJAX call to a PHP script in this particular situation?

Load as soon as the browser is launched

Having trouble getting the .replace() Javascript function to work on mobile devices?

Information is inaccessible beyond onBeforeMount in the Composition API of Vue 3

Is it necessary to use asynchronous actions in Node.js only when developing server applications?

How to create a continuous loop for a JavaScript carousel

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

Showing the computation outcome on the identical page

Angular is reporting that the check-in component is nonexistent

Using Moment.js to showcase historical information within a specified timeframe based on the user's timezone

``req.body is not being properly populated when data is sent using form-data, causing

Adding items to the array is only effective when done within the loop

How can I fix the issue of clearInterval not functioning properly in an Electron JS application?

Attempting to coordinate a virtual meeting through the utilization of the Zoom API

Pass the object either in JSON format or as a variable using the drag and drop feature

Executing a Particular Function in PHP with Arguments

How can one effectively overcome the constraint in HTML5 canvas that prevents altering the positions of previously sketched elements?