Prototype value not showing up in developer toolbar

Question

If you run this in stackoverflow's code snippet, it displays both first and last names, but on my website, when using Chrome's developer toolbar or Firefox it only displays the firstName property.

    function Person(){
      this.firstName = 'first name goes here';
    }

    var person = new Person();
    Person.prototype.lastName = 'last name goes here';
    console.log(person);

I also have a nagging suspicion that using the "new" keyword is considered to no longer be a best practice, but I can't recall where I might have read that.

Answer 1

Indeed, different tools give different outputs. Nothing strange about that. The SO snippet tool overrides the default behaviour of console.log, creating a virtual console.

Background of the Stack Snippet Virtual Console

After the Stack Snippet was launched, this became one of the change requests from the user community: Add a console to Stack Snippets, which eventually was implemented: Stack Snippets Upgrade: Virtual Console.

The discussion in those threads on meta show why this was a desired feature, for example:

• It's a lot of work to realize that there's no output because we haven't opened the console.
• you see people using document.write, which is just a terrible idea.
• alert() is extremely intrusive.

This implementation is quite different from what console.log would produce in the browser's console, which in itself is ambiguous: different browsers have different console behaviours: there is no standard as to what should be output in the console. Notice for example the many difference between FireFox and Chrome when doing console.log(new Set([1]).entries());

Differences

The Stack Snippets virtual console shows all enumerable properties, whether they are inherited or not. This roughly corresponds to this:

for (prop in person) {
    console.log(prop, person[prop]);
}

Consoles in browsers have a more comprehensive rendering. Apart from the collapsible controls and the asynchronous retrieval, they also visualise non-iterable properties, like __proto__. Inherited properties are then listed when that __proto__ node is expanded. All these features are much more advanced than the light Stack Snippet solution.

If you would like to know the precise reason for why inherited, enumerable properties are included in the virtual console output, then that question is better suited for meta, where the designers (@canon and others) can comment on their decisions themselves.

Use new?

Concerning the use of new is best practice or not: this is mostly opinion based. You may have a look at JavaScript: The Good Parts - How to not use new at all: you can see how the most-voted answer swings between the two.