Function

Table of Contents

  1. Summary
  2. Syntax
  3. Parameters
  4. Description
      1. Example
  5. Properties
  6. Methods
  7. Function instances
    1. Properties
    2. Methods
  8. Example: Specifying arguments with the Function constructor
  9. Browser compatibility
  10. See also

Summary

Every function in JavaScript is actually a Function object.

Syntax

new Function ([arg1[, arg2[, ... argN]],] functionBody)

Parameters

arg1, arg2, ... argN
Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
functionBody
A string containing the JavaScript statements comprising the function definition.

Description

Function objects created with the Function constructor are parsed when the function is created. This is less efficient than declaring a function and calling it within your code, because functions declared with the function statement are parsed with the rest of the code.

All arguments passed to the function 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.

Note: Functions created with the Function constructor do not create closures to their creation contexts; they always run in the window context (unless the function body starts with a "use strict"; statement, in which case the context is undefined).

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

Example

Creating functions with the Function constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the Function constructor for each new query if you want to avoid closures.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example - a recursive shortcut to massively modify the DOM</title>
<script type="text/javascript">
var domQuery = (function() {
  var aDOMFunc = [
        Element.prototype.removeAttribute,
        Element.prototype.setAttribute,
        CSSStyleDeclaration.prototype.removeProperty,
        CSSStyleDeclaration.prototype.setProperty
      ];

  function setSomething (bStyle, sProp, sVal) {
    var  bSet = Boolean(sVal), fAction = /old?u=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FJavaScript%2FReference%2FGlobal_Objects%2FaDOMFunc%5BbSet&y=1999 | bStyle << 1],
         aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
         aNodeList = bStyle ? this.cssNodes : this.nodes;
    if (bSet && bStyle) { aArgs.push(""); }
    for (
      var nItem = 0, nLen = this.nodes.length;
      nItem < nLen;
      fAction.apply(aNodeList[nItem++], aArgs)
    );
    this.follow = setSomething.caller;
    return this;
  }

  function setStyles (sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
  function setAttribs (sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
  function getSelectors () { return this.selectors; };
  function getNodes () { return this.nodes; };

  return (function (sSelectors) {
    var oQuery = new Function("return arguments.callee.follow.apply(arguments.callee, arguments);");
    oQuery.selectors = sSelectors;
    oQuery.nodes = document.querySelectorAll(sSelectors);
    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function (oInlineCSS) { return oInlineCSS.style; });
    oQuery.attributes = setAttribs;
    oQuery.inlineStyle = setStyles;
    oQuery.follow = getNodes;
    oQuery.toString = getSelectors;
    oQuery.valueOf = getNodes;
    return oQuery;
  });
})();
</script>
</head>

<body>

<div class="testClass">Lorem ipsum</div>
<p>Some text</p>
<div class="testClass">dolor sit amet</div>

<script type="text/javascript">
  domQuery(".testClass").attributes("lang", "en")("title", "Risus abundat in ore stultorum")
  .inlineStyle("background-color", "black")("color", "white")("width", "100px")("height", "50px");
</script>
</body>

</html>

Properties

For properties available on Function instances, see Properties of Function instances.

The global Function object has no methods of its own, however, it does inherit some methods through the prototype chain.

Properties inherited from Function:
arity, caller, constructor, length, name

Methods

For methods available on Function instances, see Methods of Function instances.

The global Function object has no methods of its own, however, it does inherit some methods through the prototype chain.

Methods inherited from Function:
apply, call, toSource, toString

Function instances

Function instances inherit from Function.prototype. As with all constructors, you can change the constructor's prototype object to make changes to all Function instances.

Properties

arguments Deprecated
An array corresponding to the arguments passed to a function. This is deprecated as property of Function, use the arguments object available within the function instead.
arity Obsolete since JavaScript 1.8.6
Specifies the number of arguments expected by the function. Use the length property instead.
caller Non-standard
Specifies the function that invoked the currently executing function.
constructor
Specifies the function that creates an object's prototype.
length
Specifies the number of arguments expected by the function.
name Non-standard
The name of the function.
Properties inherited from Object:
constructor

Methods

apply
Applies the method of another object in the context of a different object (the calling object); arguments can be passed as an Array object.
bind Requires JavaScript 1.8.5
Creates a new function which, when called, itself calls this function in the context of the provided value, with a given sequence of arguments preceding any provided when the new function was called.
call
Calls (executes) a method of another object in the context of a different object (the calling object); arguments can be passed as they are.
isGenerator Requires JavaScript 1.8.6
Returns true if the function is a generator; otherwise returns false.
toSource Non-standard
Returns a string representing the source code of the function. Overrides the Object.toSource method.
toString
Returns a string representing the source code of the function. Overrides the Object.toString method.
Methods inherited from Object:
toSource

Example: Specifying arguments with the Function constructor

The following code creates a Function 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 arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

The arguments "a" and "b" are formal argument names that are used in the function body, "return a + b".

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ?

See also

Tags (4)

Contributors to this page: lmorchard, evilpie, Marcoos, rwaldron, Sevenspade, ziyunfei, Skorney, jorh, Jamespharaoh, Niklas, AllenWB, Nickolay, victorporof, wizard04, fusionchess, PointedEars, grendel, emdonahu, Maian, ethertank, Callek, BenoitL, Mgjbot, secoif, Dria
Last updated by: evilpie,
Last reviewed by: evilpie,