Dynamic function name in JavaScript

D

24

122

I have this:

this.f = function instance(){};

I would like to have this:

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

Dwarfism answered 6/5, 2011 at 0:11 Comment(3)

You can't. But you can have this["instance"] = function() { } – Wentzel 6/5, 2011 at 0:14

see also Is there any non-eval way to create a function with a runtime-determined name? – Canzone 4/4, 2015 at 21:26

To clarify what Raynos was saying, you can do this["instance" + a] = function() { }. That wasn't clear to me. – Rover 11/9, 2019 at 20:3

S

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);

Special answered 6/5, 2011 at 0:13 Comment(8)

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. – Giavani 6/5, 2011 at 3:7

this is really important at debugging. in my case shows me directly the name of the class... so it's helpfull. – Dwarfism 11/1, 2012 at 12:15

@sg3s: can you propose another solution? – Gerlach 30/7, 2012 at 16:58

@Gerlach I didn't need to, Marcosc already had a non-eval solution at the time I downvoted this, and please don't think it was meant unfriendly, I could have just downvoted but it is suggested to at least let someone know why they were downvoted :) – Hooper 30/7, 2012 at 22:20

@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! – Gerlach 31/7, 2012 at 5:4

@Gerlach For future readers: this solution is not really different from Marcosc's answer, they both use eval() (the Function constructor does that inside). – Craniometer 23/3, 2015 at 10:17

I don't believe this should be the accepted answer. ES's new computed property name would be the best way to accomplish this. See kybernetikos' answer. – Howlyn 11/6, 2017 at 9:37

#1 - Why is this the accepted answer if everyone agrees it is not the way to go? #2 - When the code runs, the method does not exist. I get an error <MyMethodName> is undefined. – Arezzo 3/12, 2018 at 16:32

S

149

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".

Swivel answered 30/3, 2012 at 17:39 Comment(10)

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. – Enolaenormity 12/4, 2012 at 16:4

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. – Enolaenormity 17/4, 2012 at 18:19

Yes, this for extreme situations where you need to construct something on the fly. – Swivel 13/2, 2013 at 14:19

This is a nice solution. You can even import variables from the surrounding scope like:

var a = "b", c = "d"; var name = "lorem"; var func = new Function("a", "c", "return function " + name + "(d) { return this.a = a; this.c = c; this.d = d }")();

– Breechblock 19/1, 2016 at 17:35

Here's a dynamic function that uses ECMAScript 2015 (ES6). I've used ES6's const (for immutability to prevent duplicate function names), an Arrow function (so this uses Window context when run in browser), and used an IIFE so it runs immediately in the browser:

const a = 'foo'; (this.f = (() => new Function(`return function instance_${a}()\{ alert('called instance_${a}!') \}`)())())();

– Borage 29/1, 2017 at 5:32

I honestly think https://mcmap.net/q/67227/-dynamic-function-name-in-javascript 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). – Benildas 26/8, 2017 at 20:10

Make sure the name does not have any whitespace: name = "foo bar";. – Bukovina 20/10, 2017 at 9:46

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. – Fertilize 21/10, 2017 at 1:27

Internal Server Error. your website is down =( – Biomedicine 20/6, 2019 at 4:22

Content Security Policies (CSP) like "unsafe-eval" will block this – Foreleg 14/1 at 17:14

Z

72

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});

Zelaya answered 1/12, 2016 at 19:20 Comment(5)

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. – Phlegmy 28/11, 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? – Outwards 1/3, 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/… – Zelaya 8/7, 2019 at 14:19

writable: false is not necessary because it already is non-writeable to begin with. – Contentment 6/10, 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. – Contentment 6/10, 2021 at 12:31

S

58

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.

Saveall answered 25/1, 2017 at 14:27 Comment(9)

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. – Saveall 30/6, 2017 at 14:56

does it work with transpiled code? (Babel or typescript outputs) – Belligerent 4/9, 2017 at 15:7

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. – Strain 8/5, 2019 at 18:1

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/…) – Strain 9/5, 2019 at 0:22

And as others have pointed out, a function expression which a variable, const, or object property is assigned to takes the name of that variable, const, or object property. Syntactic position and all that. – Strain 9/5, 2019 at 0:30

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! – Magnificat 7/8, 2019 at 22:41

While this works in console and node.js, it does not work when transpiled, in my case with typescript 3.6.2. – Spiv 17/10, 2019 at 12:13

@JasonYoung thanks for detailed comment mate, helped a lot! – Trudeau 28/10, 2019 at 18:26

If anyone is wondering how to do this for classes, see https://mcmap.net/q/67421/-es6-dynamic-class-names – Cytolysin 10/2 at 9:4

N

22

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://mcmap.net/q/67228/-is-there-any-non-eval-way-to-create-a-function-with-a-runtime-determined-name

Nivernais answered 21/2, 2018 at 5:57 Comment(3)

How does this answer improve https://mcmap.net/q/67227/-dynamic-function-name-in-javascript? – Acidity 5/9, 2018 at 15:22

@Acidity I've already answered that: It creates a wrapper, which breaks stateful functions (functions using "this") aka classes. – Nivernais 5/9, 2018 at 18:12

@Contentment 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). – Nivernais 6/10, 2021 at 17:58

S

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);