You-dont-know-js: Anonymous functions defined as a property of an Object Literal does have a name

[stavalfi]

You Don't Know JS: this & Object Prototypes

Chapter 6: Behavior Delegation

Unlexical

There is one drawback to concise methods that's subtle but important to note. Consider this code:

var Foo = {
bar() { /../ },
baz: function baz() { /../ }
};
Here's the syntactic de-sugaring that expresses how that code will operate:

var Foo = {
bar: function() { /../ },
baz: function baz() { /../ }
};

See the difference? The bar() short-hand became an anonymous function expression (function()..) attached to the bar property, because the function object itself has no name identifier.

By Running the following code I see that chrome devtools succesfuly find the name of the bar function:

var Foo = {
    bar() { console.log("hi"); },
    baz: function baz() { /*..*/ }
};
Foo.bar

Output: ƒ bar() { console.log("hi"); }

Is this contradict your claim?

... because the function object itself has no name identifier.

[animeshk874]

You can access it by doing Foo.bar because it is just accessing the bar property from the Foo object (which is just a reference to the anonymous function). However, that anonymous function cannot reference to itself (for recursive calls maybe) other than using this.bar or Foo.bar. Also, no name will be displayed in the call stack.
Hope it helps :)

[stavalfi]

Hi @animeshk874 and thanks for the fast response.
You are saying that the call stack is unable to find (?) the name of the function ___althought___ while evaluating Foo.bar clearly indicates that that function has a name: ƒ bar() { console.log("hi"); }.

So the claim that Foo.bar is an anonymous function (and by definition of _anonymous function_ - a function __without__ an identifier) seems wrong.

Could you @animeshk874 specify where is my mistake?

[getify]

@animeshk874 is partially correct and partially incorrect.

When we say "anonymous function", many people get confused as to what that's referring to, since there can be different meanings. To set the record straight, that phrase (at least in my usage, but also most commonly) means, lexically anonymous.

The concise method is indeed an "anonymous function" from the perspective of lexical identifier access, meaning there is no lexical name assigned to the function that's then available inside itself (for recursion, etc).

Consider:

var obj = {
   bar() {
      bar(); // this will fail, because there is no `bar` lexical name here
   },
   baz: function baz() {
      baz(); // this would work, because there is a `baz` lexical name here
   }
};

However:

obj.bar;

...will in fact report a "bar" name for that function. But not because (directly) of the obj.bar reference, but rather because of something called "name inference". The function object will be given a name property:

obj.bar.name;  // "bar"

This name property is (usually, but not always -- which is weird) what's used in stack traces and other assorted devtools usage when it prints out a function reference. Its value is assigned at function creation time, and inferred from the context of its creation. Since the function is created as a property in an object literal, JS assumes that's a good "name" for the name property to adopt.

Name inference works in various other scenarios, including:

var obj = {
   baz: function(){}
};
obj.baz.name;  // "baz"

var foo = function() {};
foo.name;  // "foo"

In both cases, the functions are lexically anonymous, but still have a name property value inferred. Name inference works for regular anonymous functions and also for => arrow functions.

NOTE: one of the most common cases where anonymous functions (or arrow functions) are used is as callbacks, such as:

foo( function() {} );
bar( x => x * 2 );

In these cases, no name inferencing occurs. Those callback functions are both lexically anonymous as well as have a .name property of "anonymous".

[stavalfi]

@getify I couldn't receive a better answer, thanks!

[animeshk874]

Hi @stavalfi. Sorry, I didn't see that console O/P (f bar()...) in your question and misinterpreted it. Anyway, thanks for asking the question because that cleared some of my doubts as well. And thanks @getify for the answer. :)