console.log doesn't show functions created by class

Question

const object = {
  name: 'Andrew',
  getName() {
    return this.name
  }
}

class ObjectClass {
  constructor(name) {
    this.name = name
  }

  getName() {
    return this.name
  }
}

const object2 = new ObjectClass('Andrew')

console.log(object) // Object {name: "Andrew", getName: function getName()}
console.log(object2, 'object2') // ObjectClass {name: "Andrew", constructor: Object}

I've used codesandbox for creating this code and I get there next responses , I'm little bit confused , because I thought that object and object2 will be the same . {} thought that it is the same as new Object()

Class methods go to the prototype chain. Arrow function on the other hand become are added on the instance. So you will see those with `console.log` — Gabriele Petrioli, Sep 28 '20 at 16:34
@GabrielePetrioli and just to add, usually the console only logs own properties, not everything from the prototype. Although with that said, there is no console specification, so it's best not to rely on any details about it. It's usually a debugging tool, don't get too hung up on it. — VLAZ, Sep 28 '20 at 16:37

ElectricShadow · Answer 1 · 2020-09-28T17:11:16.370

When you are using a class, the class methods go to the prototype chain, which you can access with the Object.getPrototypeOf function or with the __proto__ property, although the latter is not preferable. When you are directly making an object, the function is a property of the object itself, and so it doesn't go to the prototype chain.

Ultimately, the result of this code depends on your console. For example, if you are using the Chrome console, you will be able to see everything from an object's prototype. Clearly, the console you are using doesn't have that feature.

If you need consistent results, don't console.log objects directly. Instead, turn those objects into strings that you can format as needed, and then log those strings.

"*which you can access with the __proto__ property*" it's best if you don't. Just ignore it's existence and pretend it's not there, use `Object.getPrototypeOf()` instead. — VLAZ, Sep 28 '20 at 17:08

score 0 · Answer 2 · answered Sep 28 '20 at 17:07

0

There are characteristics that distinguish simple objects and classes in Javascript, most notably - from your example - is the accessor method you found missing.

According to the docs, "The __proto__ getter function exposes the value of the internal [[Prototype]] of an object".

You can begin logging internals of your class using reflection and __proto__:

console.log(Object.getOwnPropertyNames(foo).concat(Object.getOwnPropertyNames(foo.__proto__)))

For more details on logging check this question: Get functions (methods) of a class

answered Sep 28 '20 at 17:07

Sevan Golnazarian

827
9
18

1

...I suppose [it bears repeating](https://stackoverflow.com/questions/64106099/console-log-doesnt-show-functions-created-by-class#comment113362383_64106598) - don't use `__proto__`, but `Object.getPrototypeOf` instead. – VLAZ Sep 28 '20 at 17:09
Yes, bump for `Object.getOwnPropertyNames(Object.getPrototypeOf(foo))` – Sevan Golnazarian Sep 28 '20 at 17:10

console.log doesn't show functions created by class

2 Answers2