120

I have this:

this.f = function instance(){};

I would like to have this:

this.f = function ["instance:" + a](){};
3

24 Answers 24

150

This will basically do it at the most simple level:

"use strict";
var name = "foo";
var func = new Function(
     "return function " + name + "(){ alert('sweet!')}"
)();

//call it, to test it
func();

If you want to get more fancy, I have a written an article on "Dynamic function names in JavaScript".

9
  • Nice work! I just discovered this on my own and was about to post it on one of these questions, but you beat me to it. I've been working a lot with backbone.js recently and am tired of seeing 'child' everywhere in my chrome debugger. This solves that issue. I wonder if there are any performance implications like using eval.
    – webXL
    Apr 12, 2012 at 16:04
  • There are security implications as well. I get "The Function constructor is eval" from jsHint, so I'm wrapping this in a debug mode check, since that's the only reason to use this. I guess "use strict" will prevent any mucking with the global object, but any arguments to the Function constructor can be modified, and whatever 'this' is set to.
    – webXL
    Apr 17, 2012 at 18:19
  • 2
    I honestly think stackoverflow.com/a/40918734/2911851 is a better solution, no need to include the body of the function as a string (unless I'm missing something, but I just tried and worked great). Aug 26, 2017 at 20:10
  • 3
    AirBnB strongly advises against this, as the Function constructor will use eval to evaluate the javascript - thus opening your code to a slew of vulnerabilities. Oct 21, 2017 at 1:27
  • 1
    Internal Server Error. your website is down =(
    – Matteo
    Jun 20, 2019 at 4:22
67

You can use Object.defineProperty as noted in the MDN JavaScript Reference:

var myName = "myName";
var f = function () { return true; };
Object.defineProperty(f, 'name', {value: myName, writable: false});
5
  • 3
    It appears this sets the name property as intended, yet if I log the function in my browser (latest Firefox dev edition) it prints function fn(), fn being the original name. Weird. Nov 28, 2017 at 20:41
  • same comment on google chrome evergreen. Property is properly set, but name in console, is the original name of the function. Cf. 2ality.com/2015/09/… It seems that the name of the function is assigned at creation and cannot be changed? Mar 1, 2018 at 2:54
  • On that 2ality.com page see the next paragraph "Changing the name of functions" [1] which describes the same technique found in the MDN Javascript Reference. 1. 2ality.com/2015/09/…
    – Darren
    Jul 8, 2019 at 14:19
  • 1
    writable: false is not necessary because it already is non-writeable to begin with.
    – CherryDT
    Oct 6, 2021 at 12:29
  • Still same in console: That's because what you see isn't based on the name but on the source code of the function which is stored along with it - you can see it when you call fn.toString(). You can't change that.
    – CherryDT
    Oct 6, 2021 at 12:31
57

In recent engines, you can do

function nameFunction(name, body) {
  return {[name](...args) {return body.apply(this, args)}}[name]
}



const x = nameFunction("wonderful function", (p) => p*2)
console.log(x(9)) // => 18
console.log(x.name) // => "wonderful function"

Thanks to T S for pointing out the need to preserve this in the comments.

Also, these days, I'd probably use the Object.defineProperty approach to achieve something similar.

8
  • 11
    While this does work, I have started using Object.defineProperty(func, 'name', {value: name}) in my own code, as I think it's maybe a little bit more natural and understandable. Jun 30, 2017 at 14:56
  • 1
    This works for me! I cannot understand the syntax though; can you please explain it? I believe I understand it all except the two uses of [name], and the fact that the return creates a function without the function keyword. May 8, 2019 at 18:01
  • 5
    Answering my own question: {[expr]: val} is an object initializer (as is a JSON object) where expr is some expression; whatever it evaluates to is the key. {myFn (..){..} } is shorthand for {myFn: function myFn(..){..} }. Note that function myFn(..) {..} can be used as an expression just like an anonymous function, only myFn would have a name. The last [name] is just accessing the member of the object (just like obj.key or obj['key']). ... is the spread operator. (Main source: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) May 9, 2019 at 0:22
  • 6
    Thanks for your sollution! Note: This doesn't preserve the value of this. For example obj={x:7,getX(){return this.x}}; obj.getX=nameFunction('name',obj.getX); obj.getX(); won't work. You could edit your answer and use function nameFunction(name, body) { return {[name](...args) {return body.apply(this, args)}}[name] } instead!
    – T S
    Aug 7, 2019 at 22:41
  • 4
    While this works in console and node.js, it does not work when transpiled, in my case with typescript 3.6.2.
    – Qwerty
    Oct 17, 2019 at 12:13
21

Update 2021: CherryDT's answer should be the easiest most straight forward way now, but it doesn't work consistently with different browsers for stack traces or Function.prototype.toString(), so if you need that you're stuck with this less convenient solution.

Old answer: Many suggestions here are suboptimal, by using eval, hacky solutions or wrappers. As of ES2015 names are inferred from the syntactic position for variables and properties.

So this will work just fine:

const name = 'myFn';
const fn = {[name]: function() {}}[name];
fn.name // 'myFn'

Resist the temptation to create named function factory methods as you wouldn't be able to pass the function from outside and retrofit it into the syntactic position to infer its name. Then it's already too late. If you really need that, you have to create a wrapper. Someone did that here, but that solution doesn't work for classes (which are also functions).

A much more in-depth answer with all the variants outlined has been written here: https://stackoverflow.com/a/9479081/633921

3
  • 1
    How does this answer improve stackoverflow.com/a/41854075/3966682?
    – d4nyll
    Sep 5, 2018 at 15:22
  • 1
    @d4nyll I've already answered that: It creates a wrapper, which breaks stateful functions (functions using "this") aka classes.
    – Albin
    Sep 5, 2018 at 18:12
  • 1
    @CherryDT Sorry, I had to go back and revisit some old use cases to realize what the problem was. Object.defineProperty was in part lacking support in Safari for a long time (and Safari browser versions were kept alive longer than most browsers due to being shipped with hardware), but mostly that it doesn't work consistently for stack traces and Function.prototype.toString. With your solution, try this const fn1 = nameFunction('fn2', function fn3(){ throw new Error("whoops") }); fn1(); and check the stack trace in Firefox vs Chrome (if you remove fn3 they still behave different).
    – Albin
    Oct 6, 2021 at 17:58
12

As others mentioned, this is not the fastest nor most recommended solution. Marcosc's solution below is the way to go.

You can use eval:

var code = "this.f = function " + instance + "() {...}";
eval(code);
8
  • 7
    I know this is what the OP asked for, but this is a horrible idea. Just because you can does not mean you should do something like this. There a much better alternatives that are almost exactly the same functionality-wise. May 6, 2011 at 3:07
  • 1
    this is really important at debugging. in my case shows me directly the name of the class... so it's helpfull.
    – Totty.js
    Jan 11, 2012 at 12:15
  • 4
    @sg3s: can you propose another solution?
    – Tom
    Jul 30, 2012 at 16:58
  • 2
    @sg3s: Thanks for answering my comment! Let me explain what I meant, and what I actually want to ask: is Marcosc's solution really significantly different from eval? Does it really make a difference if you eval something or feed it to the Function constructor? If so, can you explain the difference and its ramifications? Thanks!
    – Tom
    Jul 31, 2012 at 5:04
  • 6
    @Tom For future readers: this solution is not really different from Marcosc's answer, they both use eval() (the Function constructor does that inside).
    – kapa
    Mar 23, 2015 at 10:17
4

The function's name property by default isn't writeable, but since it's configurable we can still use Object.defineProperty to change it. Since Object.defineProperty conveniently returns the object itself, we can write a function with a dynamic name like this:

const theName = 'foobar'

const fn = Object.defineProperty(function () {
  /* ... */
}, 'name', { value: theName })

console.log(fn.name) // Logs foobar

Of course this could be factored out into a helper function:

const nameFunction = (name, fn) => Object.defineProperty(fn, 'name', { value: name })

const fn = nameFunction('foobar', function () {
  /* ... */
})

console.log(fn.name) // Logs foobar

The above nameFunction function can also be used to rename an existing function, of course (here it's just renaming and returning the anonymous one).

2
  • this helper function made my day :) Jul 21, 2022 at 13:41
  • 1
    I rewrote to TS: ``` const nameObject: <T = {}>(name: string, obj: T) => T = (value: string, obj) => Object.defineProperty(obj, "name", { value }); ``` Jul 21, 2022 at 13:41
4

For setting the name of an existing anonymous function (based on Marcosc's answer):

var anonymous = function() { return true; }

var name = 'someName';
var strFn = anonymous.toString().replace('function ', 'return function ' + name);
var fn = new Function(strFn)();

console.log(fn()); // —> true

Demo.

Note: Don't do it ;/

2
  • When you downvote it's ok. But you should give the courtesy of your reasoning so we can learn from you. OP asks for "dynamic" function names. This is one way to do it, but I'd never recommend nor did I ever do it. Sep 6, 2018 at 20:22
  • The only solution, that actually worked for my case. And there are no worries about all the uglyness, cause the function finally re-compiles and executes on the GPU, yet leaving some freedom for naming function in GPU kernel differently from it's JS counerpart. Thanks for your effort. Mar 3 at 12:31
3

What about

this.f = window["instance:" + a] = function(){};

The only drawback is that the function in its toSource method wouldn't indicate a name. That's usually only a problem for debuggers.

2
  • that is not good because the only reason I need is to see faster the name of the Classes. Every class in my system is an anonymous function and in the debugger shows me anonymous..
    – Totty.js
    Jan 11, 2012 at 12:17
  • 3
    Well, then you could have said that in the question.
    – entonio
    Jan 18, 2012 at 16:02
3

The syntax function[i](){} implies an object with property values that are functions, function[], indexed by the name, [i].
Thus
{"f:1":function(){}, "f:2":function(){}, "f:A":function(){}, ... } ["f:"+i].

{"f:1":function f1(){}, "f:2":function f2(){}, "f:A":function fA(){}} ["f:"+i] will preserve function name identification. See notes below regarding :.

So,

javascript: alert(
  new function(a){
    this.f={"instance:1":function(){}, "instance:A":function(){}} ["instance:"+a]
  }("A") . toSource()
);

displays ({f:(function () {})}) in FireFox.
(This is almost the same idea as this solution, only it uses a generic object and no longer directly populates the window object with the functions.)

This method explicitly populates the environment with instance:x.

javascript: alert(
  new function(a){
    this.f=eval("instance:"+a+"="+function(){})
  }("A") . toSource()
);
alert(eval("instance:A"));

displays

({f:(function () {})})

and

function () {
}

Though the property function f references an anonymous function and not instance:x, this method avoids several problems with this solution.

javascript: alert(
  new function(a){
    eval("this.f=function instance"+a+"(){}")
  }("A") . toSource()
);
alert(instanceA);    /* is undefined outside the object context */

displays only

({f:(function instanceA() {})})
  • The embedded : makes the javascript function instance:a(){} invalid.
  • Instead of a reference, the function's actual text definition is parsed and interpreted by eval.

The following is not necessarily problematic,

  • The instanceA function is not directly available for use as instanceA()

and so is much more consistent with the original problem context.

Given these considerations,

this.f = {"instance:1": function instance1(){},
          "instance:2": function instance2(){},
          "instance:A": function instanceA(){},
          "instance:Z": function instanceZ(){}
         } [ "instance:" + a ]

maintains the global computing environment with the semantics and syntax of the OP example as much as possible.

1
  • This resolution only works for static names or with ES6 dynamic property names. For example (name => ({[name]:function(){}})[name])('test') works but (name => {var x={}; x[name] = function(){}; return x[name];})('test') doesn't Oct 30, 2017 at 4:58
3

The Marcosc's answer has got already defined [String] function body. I was looking for the solution to rename already declared function's name and finally after an hour of struggling I've dealt with it. It:

  • takes the alredy declared function
  • parses it to [String] with .toString() method
  • then overwrites the name (of named function) or appends the new one (when anonymous) between function and (
  • then creates the new renamed function with new Function() constructor

function nameAppender(name,fun){
  const reg = /^(function)(?:\s*|\s+([A-Za-z0-9_$]+)\s*)(\()/;
  return (new Function(`return ${fun.toString().replace(reg,`$1 ${name}$3`)}`))();
}

//WORK FOR ALREADY NAMED FUNCTIONS:
function hello(name){
  console.log('hello ' + name);
}

//rename the 'hello' function
var greeting = nameAppender('Greeting', hello); 

console.log(greeting); //function Greeting(name){...}


//WORK FOR ANONYMOUS FUNCTIONS:
//give the name for the anonymous function
var count = nameAppender('Count',function(x,y){ 
  this.x = x;
  this.y = y;
  this.area = x*y;
}); 

console.log(count); //function Count(x,y){...}

2

Dynamic methods of an object may be created using Object Literal Extensions provided by ECMAScript 2015 (ES6):

const postfixes = ['foo', 'bar'];

const mainObj = {};

const makeDynamic = (postfix) => {
  const newMethodName = 'instance: ' + postfix;
  const tempObj = {
    [newMethodName]() {
      console.log(`called method ${newMethodName}`);
    }
  }
  Object.assign(mainObj, tempObj);
  return mainObj[newMethodName]();
}

const processPostfixes = (postfixes) => { 
  for (const postfix of postfixes) {
    makeDynamic(postfix); 
  }
};

processPostfixes(postfixes);

console.log(mainObj);

The output of running the code above is:

"called method instance: foo"
"called method instance: bar"
Object {
  "instance: bar": [Function anonymous],
  "instance: foo": [Function anonymous]
}
1
  • this is more akin to: o={}; o[name]=(()=>{}) rather than function <<name>>(){}
    – Sancarn
    Sep 15, 2018 at 8:58
2

The best way is to create an object with the list of dynamic functions, like:

const USER = 'user';

const userModule = {
  [USER + 'Action'] : function () { ... }, 
  [USER + 'OnClickHandler'] : function () { ... }, 
  [USER + 'OnCreateHook'] : function () { ... }, 
}
1

There are two methods to achieve this, and they have their pros and cons.


name property definition

Defining immutable name property of a function.

Pros

  • Every character is available for the name. (eg. () 全 {}/1/얏호/ :D #GO(@*#%! /*)

Cons

  • The function's syntactic (“expressional”) name may not correspond with its name property value.

Function expression evaluation

Making a named function expression and evaluating it with Function constructor.

Pros

  • The function's syntactic (“expressional”) name always corresponds with its name property value.

Cons

  • Whitespaces (and etc.) are not available for the name.
  • Expression-injectable (eg. For input (){}/1//, the expression is return function (){}/1//() {}, gives NaN instead of a function.).

const demoeval = expr => (new Function(`return ${expr}`))();

// `name` property definition
const method1 = func_name => {
    const anon_func = function() {};
    Object.defineProperty(anon_func, "name", {value: func_name, writable: false});
    return anon_func;
};

const test11 = method1("DEF_PROP"); // No whitespace
console.log("DEF_PROP?", test11.name); // "DEF_PROP"
console.log("DEF_PROP?", demoeval(test11.toString()).name); // ""

const test12 = method1("DEF PROP"); // Whitespace
console.log("DEF PROP?", test12.name); // "DEF PROP"
console.log("DEF PROP?", demoeval(test12.toString()).name); // ""

// Function expression evaluation
const method2 = func_name => demoeval(`function ${func_name}() {}`);

const test21 = method2("EVAL_EXPR"); // No whitespace
console.log("EVAL_EXPR?", test21.name); // "EVAL_EXPR"
console.log("EVAL_EXPR?", demoeval(test21.toString()).name); // "EVAL_EXPR"

const test22 = method2("EVAL EXPR"); // Uncaught SyntaxError: Unexpected identifier
0
1

If you want to have a dynamic function like the __call function in PHP, you could use Proxies.

const target = {};

const handler = {
  get: function (target, name) {
    return (myArg) => {
      return new Promise(resolve => setTimeout(() => resolve('some' + myArg), 600))
    }
  }
};

const proxy = new Proxy(target, handler);

(async function() {
  const result = await proxy.foo('string')
  console.log('result', result) // 'result somestring' after 600 ms
})()
1

You can use Dynamic Function Name and parameters like this.

1) Define function Separate and call it

let functionName = "testFunction";
let param = {"param1":1 , "param2":2};

var func = new Function(
   "return " + functionName 
)();

func(param);

function testFunction(params){
   alert(params.param1);
}

2) Define function code dynamic

let functionName = "testFunction(params)";
let param = {"param1":"1" , "param2":"2"};
let functionBody = "{ alert(params.param1)}";

var func = new Function(
    "return function " + functionName + functionBody 
)();

func(param);
0

I had better luck in combining Darren's answer and kyernetikos's answer.

const nameFunction = function (fn, name) {
  return Object.defineProperty(fn, 'name', {value: name, configurable: true});
};

/* __________________________________________________________________________ */

let myFunc = function oldName () {};

console.log(myFunc.name); // oldName

myFunc = nameFunction(myFunc, 'newName');

console.log(myFunc.name); // newName

Note: configurable is set to true to match the standard ES2015 spec for Function.name1

This especially helped in getting around an error in Webpack similar to this one.

Update: I was thinking of publishing this as an npm package, but this package from sindresorhus does exactly the same thing.

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
0

Node.js JavaScript Class Based Dynamic Function Name

File: Schema.js

class Schema {
  constructor() {
    this.name = null;
  }

  virtual(name = null) {
    this.name = name;
    return this;
  }

  get(func = false) {
    if (!this.name || !func instanceof Function) {
      throw new Error("Name and function must be provided.");
    }
    // Attach the dynamic function name to the "this" Object
    this[this.name] = func;
    this.name = null;
  }
}

module.exports = Schema;

File: index.js

const Schema = require("./Schema.js");

const User = new Schema();

User.virtual("getPostCount").get(() => {
  return 10 + 10;
});

const ok = User.getPostCount();
console.log({ User });
console.log(ok);
0

Building on Marcosc's answer, if you want to rename any function, use this:

// Returns the function named with the passed name
function namedFunction(name, fn) {
    return new Function('fn',
        "return function " + name + "(){ return fn.apply(this,arguments)}"
    )(fn)
}
0
0

This utility function merges multiple functions into one (using a custom name). The only requirement is that provided the functions are properly "new lined" at the start and end of its scope.

const createFn = function(name, functions, strict=false) {

    var cr = `\n`, a = [ 'return function ' + name + '(p) {' ];

    for(var i=0, j=functions.length; i<j; i++) {
        var str = functions[i].toString();
        var s = str.indexOf(cr) + 1;
        a.push(str.substr(s, str.lastIndexOf(cr) - s));
    }
    if(strict == true) {
        a.unshift('\"use strict\";' + cr)
    }
    return new Function(a.join(cr) + cr + '}')();
}

// Test
var a = function(p) {
    console.log("this is from a");
}
var b = function(p) {
    console.log("this is from b");
}
var c = function(p) {
    console.log("p == " + p);
}

var abc = createFn('aGreatName', [a, b, c])

console.log(abc) // Output: function aGreatName()

abc(123)

Output

this is from a
this is from b
p == 123
0

I struggled a lot with this issue. Albin's solution worked like a charm while developing, but it did not work when I changed it to production. After some debugging, I realized how to achieve what I needed. I'm using ES6 with CRA (create-react-app), which means it's bundled by Webpack.

Let’s say you have a file that exports the functions you need:

myFunctions.js

export function setItem(params) {
  // ...
}

export function setUser(params) {
  // ...
}

export function setPost(params) {
  // ...
}

export function setReply(params) {
  // ...
}

And you need to dynamically call these functions elsewhere:

myApiCalls.js

import * as myFunctions from 'path_to/myFunctions';
/* note that myFunctions is imported as an array,
 * which means its elements can be easily accessed
 * using an index. You can console.log(myFunctions).
 */

function accessMyFunctions(res) {
  // lets say it receives an API response
  if (res.status === 200 && res.data) {
    const { data } = res;
    // I want to read all properties in data object and
    // call a function based on properties names.
    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        // you can skip some properties that are usually embedded in
        // a normal response
        if (key !== 'success' && key !== 'msg') {
          // I'm using a function to capitalize the key, which is
          // used to dynamically create the function's name I need.
          // Note that it does not create the function, it's just a
          // way to access the desired index on myFunctions array.
          const name = `set${capitalizeFirstLetter(key)}`;
          // surround it with try/catch, otherwise all unexpected properties in
          // data object will break your code.
          try {
            // finally, use it.
            myFunctions[name](data[key]);
          } catch (error) {
            console.log(name, 'does not exist');
            console.log(error);
          }
        }
      }
    }
  }
}
-1
function myFunction() {
    console.log('It works!');
}

var name = 'myFunction';

window[name].call();
0
-2

I might be missing the obvious here, but what's wrong with just adding the name? Functions are invoked regardless of their name. Names are just used for scoping reasons. If you assign it to a variable, and it's in scope, it can be called. That happens if you are executing a variable which happens to be a function.

If you must have a name for identification reasons when debugging, insert it between the keyword function and the opening brace.

var namedFunction = function namedFunction (a,b) {return a+b};

alert(namedFunction(1,2));
alert(namedFunction.name);
alert(namedFunction.toString());

An alternative approach is to wrap the function in an outer renamed shim, which you can also pass into an outer wrapper, if you don't want to dirty the surrounding namespace. If you want to actually dynamically create the function from strings (which most of these examples do), it's trivial to rename the source to do what you want.

If, however, you want to rename existing functions without affecting their functionality when called elsewhere, a shim is the only way to achieve it.

(function(renamedFunction) {

  alert(renamedFunction(1,2));
  alert(renamedFunction.name);
  alert(renamedFunction.toString());
  alert(renamedFunction.apply(this,[1,2]));


})(function renamedFunction(){return namedFunction.apply(this,arguments);});

function namedFunction(a,b){return a+b};

2
  • Function / method name is useful as it's inferred from variable and properties now. It's also used in stack traces. Ex var fn = function(){}; console.log(fn.name). It's immutable, so you can't change it later. If you write a factory method that names all functions fn then this will make debugging harder.
    – Albin
    Feb 20, 2018 at 20:21
  • Calculated functions have no useful name, e.g. function compose(f, g) { return (x) => f(g(x)); }; const process = compose(uppercase, compose(stripSpaces, renderToJSON));. Stack traces won't have names for the process function or the compose(stripSpaces, renderToJSON) function. Adding a name in compose, e.g. return function composed(x) { ... }, doesn't tell us which function it's referring to. Refactoring those two functions causes repetition, boilerplate, etc. and loses all higher-order structure in a mess of fiddly first-order implementation details.
    – Warbo
    Jan 26, 2021 at 10:33
-3

You was near:

this["instance_" + a] = function () {...};

{...};

-9

This is best solution, better than new Function('return function name(){}')().

Eval is the fastest solution:

Enter image description here

var name = 'FuncName'
var func = eval("(function " + name + "(){})")
3

Not the answer you're looking for? Browse other questions tagged or ask your own question.