new Function() with variable parameters

Question

I need to create a function with variable number of parameters using new Function() constructor. Something like this:

args = ['a', 'b'];
body = 'return(a + b);';

myFunc = new Function(args, body);

Is it possible to do it without eval()?

---

Thank you very much, guys! Actually, a+b was not my primary concern. I'm working on a code which would process and expand templates and I needed to pass unknown (and variable) number of arguments into the function so that they would be introduced as local variables.

For example, if a template contains:

<span> =a </span> 

I need to output the value of parameter a. That is, if user declared expanding function as

var expand = tplCompile('template', a, b, c) 

and then calls

expand(4, 2, 1) 

I need to substitute =a with 4. And yes, I'm well aware than Function is similar to eval() and runs very slow but I don't have any other choice.

Answer 1

You can do this using apply():

args = ['a', 'b', 'return(a + b);'];
myFunc = Function.apply(null, args);

Without the new operator, Function gives exactly the same result. You can use array functions like push(), unshift() or splice() to modify the array before passing it to apply.

You can also just pass a comma-separated string of arguments to Function:

args = 'a, b';
body = 'return(a + b);';

myFunc = new Function(args, body);

On a side note, are you aware of the arguments object? It allows you to get all the arguments passed into a function using array-style bracket notation:

myFunc = function () {
    var total = 0;

    for (var i=0; i < arguments.length; i++)
        total += arguments[i];

    return total;
}

myFunc(a, b);

This would be more efficient than using the Function constructor, and is probably a much more appropriate method of achieving what you need.

Answer 2

@AndyE's answer is correct if the constructor doesn't care whether you use the new keyword or not. Some functions are not as forgiving.

If you find yourself in a scenario where you need to use the new keyword and you need to send a variable number of arguments to the function, you can use this

function Foo() {
  this.numbers = [].slice.apply(arguments);
};


var args = [1,2,3,4,5]; // however many you want
var f = Object.create(Foo.prototype);
Foo.apply(f, args);

f.numbers;          // [1,2,3,4,5]
f instanceof Foo;   // true
f.constructor.name; // "Foo"

---

ES6 and beyond!

// yup, that easy
function Foo (...numbers) {
  this.numbers = numbers
}

// use Reflect.construct to call Foo constructor
const f =
  Reflect.construct (Foo, [1, 2, 3, 4, 5])

// everything else works
console.log (f.numbers)          // [1,2,3,4,5]
console.log (f instanceof Foo)   // true
console.log (f.constructor.name) // "Foo"

Answer 3

You can do this:

let args = '...args'
let body = 'let [a, b] = args;return a + b'

myFunc = new Function(args, body);
console.log(myFunc(1, 2)) //3

Answer 4

If you're just wanting a sum(...) function:

function sum(list) {
    var total = 0, nums;
    if (arguments.length === 1 && list instanceof Array) {
        nums = list;
    } else {
        nums = arguments;
    }
    for (var i=0; i < nums.length; i++) {
        total += nums[i];
    }
    return total;
}

Then,

sum() === 0;
sum(1) === 1;
sum([1, 2]) === 3;
sum(1, 2, 3) === 6;
sum([-17, 93, 2, -841]) === -763;

If you want more, could you please provide more detail? It's rather difficult to say how you can do something if you don't know what you're trying to do.

Answer 5

A new feature introduced in ES5 is the reduce method of arrays. You can use it to sum numbers, and it is possible to use the feature in older browsers with some compatibility code.

Answer 6

There's a few different ways you could write that.

// assign normally
var ab = ['a','b'].join('');
alert(ab);
// assign with anonymous self-evaluating function
var cd = (function(c) {return c.join("");})(['c','d']);
alert(cd);
// assign with function declaration
function efFunc(c){return c.join("");}
var efArray = ['e','f'];
var ef = efFunc(efArray);
alert(ef);
// assign with function by name
var doFunc = function(a,b) {return window[b](a);}
var ghArray = ['g','h'];
var ghFunc = function(c){return c.join("");}
var gh = doFunc(ghArray,'ghFunc');
alert(gh);
// assign with Class and lookup table
var Function_ = function(a,b) {
  this.val = '';
  this.body = b.substr(0,b.indexOf('('));
  this.args = b.substr(b.indexOf('(')+1,b.lastIndexOf(')')-b.indexOf('(')-1);
  switch (this.body) {
    case "return": 
      switch (this.args) {
        case "a + b": this.val = a.join(''); break;
      }
    break;
  }
} 
var args = ['i', 'j'];
var body = 'return(a + b);';
var ij = new Function_(args, body);
alert(ij.val);

Answer 7

Maybe you want an annoymous function to call an arbitary function.

// user string function
var userFunction = 'function x(...args) { return args.length}';

Wrap it

var annoyFn = Function('return function x(...args) { return args.length}')()
// now call it
annoyFn(args)

Answer 8

new Function(...)

Declaring function in this way causes the function not to be compiled, and is potentially slower than the other ways of declaring functions.

Let is examine it with JSLitmus and run a small test script:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

What I did above is create a function expression and function constructor performing same operation. The result is as follows:

FireFox Performance Result

IE Performance Result

Based on facts I recommend to use function expression instead of function constructor

var a = function() {
 var result = 0;
 for(var index=0; index < arguments.length; index++) {
  result += arguments[index];
 }
 return result;
 }
alert(a(1,3));

Answer 9

function construct(){
         this.subFunction=function(a,b){
         ...  
         }
}
var globalVar=new construct();   

vs.

var globalVar=new function (){
              this.subFunction=function(a,b){
              ...
              }
}

I prefer the second version if there are sub functions.

Answer 10

the b.apply(null, arguments) does not work properly when b inherits a prototype, because 'new' being omitted, the base constructor is not invoked.

Answer 11

In this sample i used lodash:

function _evalExp(exp, scope) {
  const k = [null].concat(_.keys(scope));
  k.push('return '+exp);
  const args = _.map(_.keys(scope), function(a) {return scope[a];});
  const func = new (Function.prototype.bind.apply(Function, k));
  return func.apply(func, args);
}

_evalExp('a+b+c', {a:10, b:20, c:30});