JavaScript naming object functions

Question

Fairly new to JS,

Using a simple example of an object with a function:

var person = {
    name: "Bob McBobson",
    talk: function descriptiveFunctionName() {alert("Hello");}
};

I've noticed you can name object functions (e.g. descriptiveFunctionName above)

Are there any cases where this would be needed/helpful rather than leaving anonymous?

It's my understanding that `descriptiveFunctionName` is only available inside the function itself. I say "its my understanding" because I'm not 100% on this. You can test this by changing the alert to `alert(descriptiveFunctionName)`. — , Aug 27 '18 at 17:09
@Amy - You're correct (well, there and as the `name` property on the function [as of ES2015] and in stack traces). — T.J. Crowder, Aug 27 '18 at 17:10
javascript engines use function names to make better stack traces. this makes debugging much easier. — snek, Aug 27 '18 at 17:15
@snek Looking at one of the answers it suggests in my example the function would be named 'Talk' do you know if that would show in the stack? — Dog Boy, Aug 27 '18 at 17:18
@DogBoy - Yes, in most modern engines. And eventually, probably in all of them. — T.J. Crowder, Aug 27 '18 at 17:26

score 5 · Accepted Answer · answered Aug 27 '18 at 17:10

Are there any cases where this would be needed/helpful rather than leaving anonymous?

As of ES2015, even if you left out descriptiveFunctionName there, your function wouldn't be anonymous, it would have a name (talk). ES2015 added inferred function names (and the name property, finally). Names are inferred in the majority of situations, with the only really important place they aren't inferred being obj.foo = function() { } (which leaves the function with the name "", not "foo").

Separately, if the function will be recursive or otherwise refer to itself (set itself as an event handler, etc.), you may prefer to reference it by its name (which is in-scope within it).

So, reasons for adding the name:

If you're creating the object as shown in your question and you want the function's actual name not to match the property you're initializing with the function.
If you're doing obj.foo = function nameHere() { }; and you want the function to have a name rather than "".
It will refer to itself and you want to use that name rather than the object property.

score 2 · Answer 2 · answered Aug 27 '18 at 17:12

Another reason you might want to do it is so you can retrieve the function's name later. So if you could assign the variable to one of many functions and then later want to see which one you assigned you can recall it with .name.

var parent = { myFunc: undefined };
var rnd = Math.floor(Math.random() * 3);
switch (rnd) {
  case 0: parent.myFunc = function subtract(x) { return x - 1; }; break;
  case 1: parent.myFunc = function add(x) { return x + 1; }; break;
  case 2: parent.myFunc = function multiply(x) { return x * 2; }; break;
}

console.log(parent.myFunc.name); // subtract, add, or multiply

JavaScript naming object functions

2 Answers2