Get A Function Name Like Printed In Chrome Console

Considering this code : var o = {}; o.f = function(){}; new o.f; Chrome prints o.f {} into the console. Do you know how this o.f part is called? More importantly, is there any way

Solution 1:

Well, this seems a simple enough question, as far as the naming of all these constructs goes:

o.f = function(){};

is a common statement, consisting of even more common expressions. o.f is simply one of 2 ways to access an objects' properties, commonly referred to as the dot-notation. Though I believe in JS the dot (.) isn't really seen as an operator, I'll be referring to it as the member-of operator henceforth. Next we have the well-known assignment-operator, which assigns the right-hand operand to the left (member of the object o, called f). The right-hand expression (needs to be evaluated to a singular value) is a function definition that, instead of a statement on its own, is used as an expression. Given that fact, we refer to this usage of functions as function expressions.

In this particular case, the function has no name, it's an anonymous function. Internally, most -if not all engines- will give it a name, but that's not something JS should know or indeed care about. As far as JS is concerned, this function has no name, and is only accessible through o.f. If you call this function like so: o.f(), its context will be that of the object o, effectively making this function behave as a method. So basically your statement reads like this: "Assign, and create if required, to the member of o called f, an anonymous function." The function itself has no name.

Consider this:

var o = {f: function(){console.log('I am a function');}};
var foobar = o.f;
foobar();//logs I am a function

So saying the name of the function o.f is f doesn't always apply. Other variables or properties can reference the same function. That's because functions are first class objects, they can be returned, passed to and assigned to, from and by anything.

The answer, then, is to use either one of these 2 approaches:

You can change the function expression by adding a name, to turn it into a named function expression:

f.o = function newName(){};

The newName name is, apart from older versions of IE, not available outside of the functions' scope. This is required by the ECMA specifications see the details here. Anyway, now we can check for that:

var func = functionfunc(){console.log(func);};
//same name:func();//logs function func(){}var foobar = func;
foobar();//logs function func(){}
func = 123;//<-- no longer functionfoobar();//still function func(){}//func is still accessiblevar hidden = (function()
{
    returnfunctionnamed()
    {
        console.log(named);//access name
    };
}());
hidden();//logs function named(){}console.log(named);//undefined -> not visible outside the function itself

The name of the function is restricted to its own scope.

Use a regex, which is slightly hacky, and doesn't pick up on two variables/properties referencing the same function object:

o = {f: function(){console.log('I am a function');}};
for (var pName in o)
{//probably add o.hasOwnProperty(pName) check to be safeif (o[pName] instanceofFunction)
    {
        console.log(o.f.toString().replace(
            /^function\s*\(/,
            'function o.'+pName+'(')
        );
    }
}

This stringifies the function (giving function (){/*body*/}) and replaces function ( with function <propertyName>(. If the function already had a name of its own, that name is not replaced.

Solution 2:

In general, this is not common practice in Javascript or in programming in general.

However, functions do have an attribute name - see Function.name. but in your code o.f is a nameless function.

var o = {};
o.f = function(){}; //function (){} creates a nameless function.

you can define a name before the ()

var o = {};
o.f = function f(){}; //function f(){} creates a function with the name f

then

o.f.name == 'f'

NOTE: this functionality is NOT supported in IE, and is not a specification of EMCA

Solution 3:

This is exposed as the name property of the function, and these day it is part of the standard (search for SetFunctionName in the spec). See also MDN, Chrome Platform Status, browser support. If you are asking specifically about the feature of auto-guessing the name from the variable name for anonymous functions, MDN calls that the inferred function name.

Back when the question was asked, the definitive discussion of this topic was kangax's article Named function expressions demystified (now a bit outdated).