Javascript named function assigned to a property

Question

I'm working on some JavaScript code that defines some class methods by defining the prototype object, as shown below:

/**
 * @constructor
 */
function MyClass() {
    var someField = 'hello world';
}

MyClass.prototype = {
    getSomeField1: function getSomeField2() {
        return someField;
    }
};

I have two questions:

What is getSomeField2, and will it be accessible to any code?
Can anyone give any examples of a scenario where it might be advantageous to use different names for the key and for the function name? I would have thought it would just confuse people reading the code.

In all other instances of similar code, either the property and the function names match, or the function is unnamed.

Isn't that other question subtly different? My question is about a named function as a keyed value in an Object. — Richy Rich, Jan 27 '16 at 13:56
The linked question (to close this one) did not talk about the case where you have a named function assigned to a property, that's why I reopened it — Ruan Mendes, Jan 27 '16 at 13:57
@RichyRich if you use `arguments.callee` then you'll get the `getSomeField2` as a name. — Jai, Jan 27 '16 at 13:58

Ruan Mendes · Accepted Answer · 2016-01-27T14:07:13.020

1

The main benefit is that all browsers will show names of functions in stack traces.

Typically, people use an anonymous function when assigning it to a property or variable. Chrome had been pretty good at figuring out that it should use the property or variable name on the stack trace, but IE used to show anonymous.

Also named functions have a name property

(function a(){}).name // a
(function(){}).name // ""

edited Jan 27 '16 at 14:07

answered Jan 27 '16 at 13:52

Ruan Mendes

90,375
31
153
217

not only, getSomeField2 should be accessible from inside the function as well ;) – Icepickle Jan 27 '16 at 13:53
Thanks. In my example then, which name would the browser show? getSomeField1, or getSomeField2? – Richy Rich Jan 27 '16 at 13:54
How about you run it and try it? My guess is it shows the real name, the property name is a back up – Ruan Mendes Jan 27 '16 at 13:55
@RichyRich that is not accessible to other functions as that is a private var for class. – Jai Jan 27 '16 at 13:55
@RichyRich `MyClass.prototype.getSomeField1.name` is what the browser would (most likely) show. In my case (Chrome), that is "getSomeField2". – ROAL Jan 27 '16 at 13:59
@Jai, it is not a private var `MyClass.prototype.getSomeField1.name` can be run from anywhere. – Ruan Mendes Jan 27 '16 at 14:10
@juanmendes yes I got that just not read the question properly. – Jai Jan 27 '16 at 14:34
@juanmendes yes I got that just not read the question properly. – Jai Jan 27 '16 at 14:34

Guilherme · Answer 2 · 2016-01-27T14:36:54.747

1

Naming functions is useful for debugging. When printing a stack trace, for instance, the name getSomeField2 will show up, instead of "Anonymous Function". It's also useful for defining recursive functions, as there's no other clear way for a function to call itself. Before named function expressions were introduced in JS, if a function wanted to call itself was by using the (rather ugly and "forbidden" since ES5) arguments.callee approach.

So, to answer your question, the getSomeField2 binding is only available inside the function body, which you can verify as follows:

(function myFunctionName() {
    console.log(`Inside: ${myFunctionName}`); // prints the function body
})();
console.log(`Outside: ${myFunctionName}`); // ReferenceError: myFunctionName is not defined

edited Jan 27 '16 at 14:36

answered Jan 27 '16 at 13:59

Guilherme

608
1
6
13

When were named function introduced? They have always been there. There used to be some browsers (Safari) that had problems assigning named functions to properties/variables early on, AFAIK. – Ruan Mendes Jan 27 '16 at 14:08
My bad, text was supposed to read "named function expressions". I don't know when they were actually introduced, but the first mention I found of them was on the ES3 spec (perhaps I'm misinterpreting it, though). Before then, `arguments.callee` or function declarations were the way to call functions recursively, to give one example. – Guilherme Jan 27 '16 at 14:43
Yeah, named function expressions were introduced later. Their main benefit is that they don't create a global function as a named function would and (as you mentioned) you can refer to the function from the body of the function instead of `arguments.callee`. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function – Ruan Mendes Jan 28 '16 at 01:50

Javascript named function assigned to a property

2 Answers2