JavaScript Objects and constructor types

Question

Recreate the same type of object

As per the Image Im trying to recreat that type of Object . Chrome Dev tools

Console.log(TabPanel) Gives me the return on the object but what I don't understand is how the function name

TabPanel : f TabPanel()

follows the f symbol in the log .

How can I recreate that type of object with a simple example I have tried to use constructors and prototypes . I'm not sure how they achieved this

the console log

T.J. Crowder · Accepted Answer · 2018-08-09 16:00:56Z

2

What devtools is showing you there is that the value of TabPanel property on the object you logged is a reference to a function called TabPanel (not an object created by TabPanel, the TabPanel function itself). Here's an example:

function Example() {
}
var o = {
  ex: Example
};
console.log(o);

Look in the real console.

That gives us:

answered Aug 9, 2018 at 16:00

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JonoJames Over a year ago

Oooohhhhhhhhh Thanks that makes sense.... Would up vote you if i could

Steve Vaughan · Accepted Answer · 2018-08-09 16:11:44Z

1

If you create your function with a name, then it will display like that in your console.

const TabPanel = function TabPanel() {};
console.log(TabPanel);

Will log as you show in your screenshot

If you wanted this as part of an object, you could do:

const TabPanel = {
    TabPanel: function TabPanel() { ... }
}

Which would log as an object, which when expanded would show you your named function.

edited Aug 9, 2018 at 16:11

answered Aug 9, 2018 at 15:59

Steve Vaughan

2,17916 silver badges18 bronze badges

2 Comments

JonoJames Over a year ago

Thank you but place that in an object like 'TabPanel = {}; TabPanel .TabPanel = (function(){....}); ' you still dont see it like that in chrome log

Steve Vaughan Over a year ago

Yes, by defining a function without a name, it won't show as you desire, because the function has no name. Updated my example

Collectives™ on Stack Overflow

JavaScript Objects and constructor types

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related