TheFunction() constructor createsFunction objects. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues aseval(). However, unlikeeval (which may have access to the local scope), theFunction constructor creates functions which execute in the global scope only.

Try it

const sum = new Function("a", "b", "return a + b");console.log(sum(2, 6));// Expected output: 8

Syntax

new Function(functionBody)new Function(arg1, functionBody)new Function(arg1, arg2, functionBody)new Function(arg1, arg2, /* …, */ argN, functionBody)Function(functionBody)Function(arg1, functionBody)Function(arg1, arg2, functionBody)Function(arg1, arg2, /* …, */ argN, functionBody)

Parameters

arg1, …,argNOptional

TrustedScript instances or strings specifying names to be used by the function as formal argument names. The value must correspond to a valid JavaScript parameter (any of plainidentifier,rest parameter, ordestructured parameter, optionally with adefault), or a list of such strings separated with commas.

As the parameters are parsed in the same way as function expressions, whitespace and comments are accepted. For example:"x", "theValue = 42", "[a, b] /* numbers */" — or"x, theValue = 42, [a, b] /* numbers */". ("x, theValue = 42", "[a, b]" is also correct, though very confusing to read.)

functionBody

ATrustedScript or a string containing the JavaScript statements comprising the function definition.

Exceptions

SyntaxError

Function parameter arguments can't be parsed as a valid parameter list, or thefunctionBody can't be parsed as valid JavaScript statements.

TypeError

Any parameter is a string whenTrusted Types areenforced by a CSP and no default policy is defined.

Description

Function objects created with theFunction constructor are parsed when the function is created. This is less efficient than creating a function with afunction expression orfunction declaration and calling it within your code, because such functions are parsed with the rest of the code.

All arguments passed to the function, except the last, are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed. The function will be dynamically compiled as a function expression, with the source assembled in the following fashion:

`function anonymous(${args.join(",")}) {${functionBody}}`;

This is observable by calling the function'stoString() method.

However, unlike normalfunction expressions, the nameanonymous is not added to thefunctionBody's scope, sincefunctionBody only has access the global scope. IffunctionBody is not instrict mode (the body itself needs to have the"use strict" directive since it doesn't inherit the strictness from the context), you may usearguments.callee to refer to the function itself. Alternatively, you can define the recursive part as an inner function:

const recursiveFn = new Function(  "count",  `(function recursiveFn(count) {  if (count < 0) {    return;  }  console.log(count);  recursiveFn(count - 1);})(count);`,);

Note that the two dynamic parts of the assembled source — the parameters listargs.join(",") andfunctionBody — will first be parsed separately to ensure they are each syntactically valid. This prevents injection-like attempts.

new Function("/*", "*/) {");// SyntaxError: Unexpected end of arg string// Doesn't become "function anonymous(/*) {*/) {}"

Security considerations

The method can be used to execute arbitrary input passed to any parameter. If the input is a potentially unsafe string provided by a user, this is a possible vector forCross-site-scripting (XSS) attacks. For example, the following example assumes theuntrustedCode was provided by a user:

const untrustedCode = "alert('Potentially evil code!');";const adder = new Function("a", "b", untrustedCode);

Websites with aContent Security Policy (CSP) that specifiesscript-src ordefault-src will prevent such code running by default. If you must allow the scripts to run viaFunction(), you can mitigate these issues by always assigningTrustedScript objects instead of strings, andenforcing trusted types using therequire-trusted-types-for CSP directive. This ensures that the input is passed through a transformation function.

To allowFunction() to run, you additionally need to specify thetrusted-types-eval keyword in your CSPscript-src directive. Theunsafe-eval keyword also allowsFunction(), but is much less safe thentrusted-types-eval because it would allow execution even on browsers that do not support trusted types.

For example, the required CSP for your site might look like this:

Content-Security-Policy: require-trusted-types-for 'script'; script-src '<your_allowlist>' 'trusted-types-eval'

The behavior of the transformation function depends on the specific use case that requires a user provided script. If possible, you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided string.

Examples

Note that these examples omit the use of trusted types for brevity. For code showing the recommended approach, seeUsingTrustedScript ineval().

Specifying arguments with the Function constructor

The following code creates aFunction object that takes two arguments.

// Example can be run directly in your JavaScript console// Create a function that takes two arguments, and returns the sum of those argumentsconst adder = new Function("a", "b", "return a + b");// Call the functionadder(2, 6);// 8

The argumentsa andb are formal argument names that are used in the function body,return a + b.

Creating a function object from a function declaration or function expression

// The function constructor can take in multiple statements separated by a semicolon. Function expressions require a return statement with the function's name// Observe that new Function is called. This is so we can call the function we created directly afterwardsconst sumOfArray = new Function(  "const sumArray = (arr) => arr.reduce((previousValue, currentValue) => previousValue + currentValue); return sumArray",)();// call the functionsumOfArray([1, 2, 3, 4]);// 10// If you don't call new Function at the point of creation, you can use the Function.call() method to call itconst findLargestNumber = new Function(  "function findLargestNumber (arr) { return Math.max(...arr) }; return findLargestNumber",);// call the functionfindLargestNumber.call({}).call({}, [2, 4, 1, 8, 5]);// 8// Function declarations do not require a return statementconst sayHello = new Function(  "return function (name) { return `Hello, ${name}` }",)();// call the functionsayHello("world");// Hello, world

Specifications

Browser compatibility

See also

• Using the function constructor ineval()
• function
• function expression
• Functions