Are the conventional JS Functions part of an object or not?

When I printed the object I did't get the conventional style functions but only the arrow style functions. Are the conventional functions hidden part of the created object or they do not belong to the class object?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class Person {
    pName = "Hasnain";
    pAge = 22;

    displayNormalFunc1()
    {
        return this;
    }
    displayNormalFunc2()
    {
        return this;

    }
    displayArrowFunc1 = ()=>
    {
        return this;
    }
    displayArrowFunc2 = ()=>
    {
        return this;
    }
}

objp = new Person();
console.log(objp)

<!-- end snippet -->

displayArrowFunc1, displayArrowFunc2 is like a variable it will be initialized every time Person is initialized
displayNormalFunc1, displayNormalFunc2 are methods that belong to prototype which is a design principle of prototypical programming languages ​​they are created only once when declaring Person and directly written to your Person.prototype it is possible to access them through some javscript APIs but it is not in this question

More info:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#constructors

See example:

const p1 = new Person()
const p2 = new Person()

console.log(p1.displayNormalFunc1 === p2.displayNormalFunc1) // true
consele.log(p1.displayArrowFunc1 === p2.displayArrowFunc1) // false

and

class Foo {
  pLog() {
    console.log('p a')
  }
  log = () => console.log('a')
}

const bar = new Foo()

bar.pLog() // 'p a'
Foo.prototype.pLog = () => console.log('p b')
bar.pLog() // 'p b'

bar.log() // 'a'
Foo.prototype.log = () => console.log('b')
bar.log() // 'a'

This actually is nothing to do with whether the functions are arrow functions or not. I can rewrite your example with the displayArrowFunc properties defined in the same way but as "regular" function expressions, and the result is the same:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

class Person {
    pName = "Hasnain";
    pAge = 22;

    displayNormalFunc1()
    {
        return this;
    }
    displayNormalFunc2()
    {
        return this;

    }
    displayArrowFunc1 = function()
    {
        return this;
    }
    displayArrowFunc2 = function()
    {
        return this;
    }
}

objp = new Person();
console.log(objp)

// see comments on answer
console.log(Person.prototype);
console.log(Person.__proto__);
console.log(Person.__proto__ === Function.prototype);

<!-- end snippet -->

The result is actually down to a few different things about Javascript objects and "classes". I'll try not to get too deep into this but give a quick summary of the key facts, with links.

Javascript has a version of "inheritance" for objects - for objects directly, not "classes" - which is quite different from that found in languages like Java and C#. Basically, each object is linked to a "prototype object" which is used to look up properties (including function properties, or "methods") that don't exist on the original object.

When you console.log an object, you'll only be shown the properties that "directly exist" on that object - not those that exist on its prototype, or its prototype's prototype and so on. Even though accessing those properties that are in the prototype chain will still work.

That's the root of what you observe - it turns out the "arrow style functions" in your original example (as well as the non-arrow ones in my modified example) are direct properties of the class instance objp, but the other ones are not.

The "normal functions" are not because this is how Javascript "classes" work. As I've tried to imply by the use of quotation marks, JS doesn't really have "clases" - they're syntactic sugar for a regular Javascript function. JS has the feature that any function can be called using the new operator, which will then construct a new object, whatever the function body itself actually does. This used to be the way, before ES6 introduced the class keyword (in around 2014/5), that people used "classes" in JS.

And the way to add "methods" to such a "class" would be like this:

function SomeClass(a) {
  this.a = a;
}

SomeClass.prototype.someMethod = function() {
  // do something here
}

Notice how the method is actually a property of the object SomeClass.prototype - which then (due to how JS works internally) becomes the "prototype object" (in the sense mentioned above) of any instance you construct via const someInstance = new SomeClass(2);.

And that's exactly what your "class" code gets transformed into - it's just a syntactic sugar. This is why displayNormalFunc and so on aren't logged - they're not on the actual instance object, but on its prototype.

As for why displayArrowFunc1 and friends are logged, that's because you've defined these in a different way inside your class - a way that is a more recent JS feature than "classes" themselves. These, where you put someProperty = something inside the class body, are known as class fields. Notice this sentence in the docs I linked to:

> Public instance fields exist on every created instance of a class.

So in short, that's why they are logged - because they're on the instance, not its prorotype. This applies not only to "regular" values like your pName and pAge, but also the functions/methods you defined this way - functions in Javascript are just values like any other. And this is why as I said it's nothing to do with whether you defined those function expressions as arrow functions or not - it's the syntax you use to add them to the class.

In short, someProperty = someValue inside the class body puts the property directly on each constructed instance, including when someValue is a function. Whereas "standard" method definitions are a special syntax and they end up added to the prototype of all such instances - therefore they don't appear when an instance is logged.