Creating functions dynamically with JavaScript

Written by

Walter G.

Comments

1

Published on

August 22 2019

Modified on

October 18 2021

Filed under

javascript

The Function constructor is something that isn't usually talked about in JavaScript circles, but it is a useful mechanism to have that allows you to generate functions dynamically based on a string input. Here is a quick example of it in action before we dive into it a bit more.

let add = new Function("num1", "num2", "return num1 + num2");

console.log(add(1, 3));

The constructor consists of 2 "types" of arguments. The first type is a comma-separated list of argument names belonging to the new function, and the second is the actual code for the function body itself as a string. After you have declared the Function constructor you can call it as you would a regular function in JavaScript.

If you are new to JavaScript, then I recommend the following book Web Design with HTML, CSS, JavaScript and jQuery, which can get you up and running pretty quickly with JavaScript.

Default parameters

Thanks to added ES6 functionality, you can also include default parameters to your dynamic function as such:

let add = new Function("num1", "num2 = 0", "return num1 + num2");

console.log(add(1));  // returns 1

In this case leaving out the second argument would simply default it to the value of 0 to prevent any Nan scenario.

Using rest parameters

Again, thanks to ES6, you can also use the rest operator as the first argument if you are unsure of the number of arguments that the function will include, or if they vary in number from function call to function call:

let getCount = new Function("...args", "return args.length");

console.log(getCount(1, 2, 3));	// returns 3
console.log(getCount(1, 2)); // returns 2

Use cases

One potentially powerful use case scenario for creating dynamic functions, is the ability to be able to store your JavaScript externally in some type of database or repository and then to be able to regenerate this function on the fly. Essentially, it's how the browser works pretty much. It reads in a JavaScript file, which is a string, and it runs the code through the JavaScript engine.

You could also potentially have incredibly dynamic logic that changes based on multiple variables and/or parameters and require this flexibility.

I think in the future we'll definitely be seeing much more of this procedure as technology and coding techniques advance in nature. For now, if you have any unique use cases for dynamic function creation, comment down below.

Comments

A

Angel Ramos

8/27/2020 8:40:03 PM

That was an amazing post, it was usefully to know how to do some store queries.

reply

Add comment