Class Property in JavaScript

First of all, they are not "class properties". They are instance properties just declared upfront. This gives you the clear idea about what fields (properties) can be expected from the class instance.

Based on the documentation:

Public and private field declarations are an experimental feature (stage 3) proposed at TC39, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like Babel.

So, based on the proposal in the link, your code is for declaring public properties of the class instances:

class Person {
  myProperty ='Something' // this means anyone can access the property
}

For private properties, they're suggesting this syntax:

class Person {
  #myPrivateProperty ='Something' // this means only the instance methods have access
}

To answer your questions:

1. Where is myProperty stored, I can't find it anywhere inside Person or Athlete?

It's stored as an instance property of an instance of the Person class. Since Athlete extends it, an instance of Athlete also will be given the same property. Read Object Oriented Programming for more details.

2. Why can I access myProperty inside writeSomething()?

writeSomething() is the method of the instance, so it has access to any instance property. (public and private)

3. Why does myProperty appear inside athlete, when it didn't appear anywhere else?

It should appear in a Person instance as well. For example, you can write:

const person = new Person();
person.myProperty = 'new Something';

4. Is this another way of writing properties as opposed to Person.myProperty or is it something else?

It's just a declaration of instance properties made easier and more intuitive, and with implied access modifier (i.e. public).

Finally, if you want to declare a class property, you need to specify it as a static property like this:

class Person {
  static myProperty = 'some value';
}
console.log(Person.myProperty);

I'll try to answer your questions as best I can:

1. Where is myProperty stored, I can't find it anywhere inside Person or Athlete?

Writing:

class Person { myProperty = 'Something' }

Is the same as writing:

class Person {
  constructor() {
    this.myProperty = 'Something';
  }
}

My understanding is that writing it the first way actually adds the property definition to the constructor - you won't see myProperty anywhere on the prototype of Person, the property will not exist anywhere until an instance is created with new Person and the constructor is called.

2. Why can I access myProperty inside writeSomething()?

You can access myProperty inside writeSomething through the this context as it will refer to the instance of Person unless otherwise bound.

3. Why does myProperty appear inside athlete, when it didn't appear anywhere else?

The property isn't inside of Athlete per-se but without defining it's own constructor it will inherit the parent class constructor meaning Athlete instances will get the same property defined when they are instantiated. If you were to add a constructor to Athlete you would have to call the super constructor (i.e. Person constructor) at which time the property would be defined on the intstance.

4. Is this another way of writing properties as opposed to Person.myProperty or is it something else?

As described above, you can also define these instance properties in the constructor with this.myProp = 'my value'. You can read more here on how to use class fields.

Where is myProperty stored, I can't find it anywhere inside Person or Athlete?

Public instance fields on classes are syntactic sugar for instantiating instance own properties from inside the class constructor.

class Person { constructor() { this.p1 = 'p1 value' } }

Given the following:

class Person { p1 = 'p1 value'; p2 = 'p2 value' }

class Athlete extends Person { p1 = 'p1 overridden value' }

The prototype property of the Person class is placed on to the prototype chain of the prototype property of the Athlete class.

console.log(Athlete.prototype.__proto__ === Person.prototype) // true

The prototype property of the Person class does not contain the p1 property, because it will be dynamically added by the default constructor of the Person class, when an instance is created.

console.log(Person.prototype.hasOwnProperty('p1')) // false

const p = new Person()

When newing-up a Person the constructor dynamically adds the property to the resulting instance.

console.log(p.hasOwnProperty('p1')) // true

const a = new Athlete()

When newing-up an Athlete the Person super constructor is implicitly called against the Athlete instance putting both p1 and p2 on the instance, finally the Athlete constructor is run and p1 is overwritten.

console.log(a.hasOwnProperty('p1')) // true
console.log(a.hasOwnProperty('p2')) // true
console.log(a.p1) // p1 value overridden

Why can I access myProperty inside writeSomething()?

This is just normal this behavior. When invoking a function as a method, the target of the method is the object it was invoked upon. In this case, the instance of Athlete.

1) Where is myProperty stored, I can't find it anywhere inside Person or Athlete?

Variables that can be accessed inside Person or Athlete are called static class variables. You can define them by either doing:

Person.staticProperty = 'Something';

or

class Person {
  static staticProperty = 'Something';
}

This variable can be accessed inside your class:

class Person {
   static staticProperty = 'Something';

  logStaticProperty() {
    console.log(Person.staticProperty);
  }
}

2) Why can I access myProperty inside writeSomething()?

When you create an instance of a class using new, you can attach variables that are isolated to that single instance. The syntax being used in the constructor attaches the variable to the instance.

3) Why does myProperty appear inside athlete, when it didn't appear anywhere else?

See #2.

4) Is this another way of writing properties as opposed to Person.myProperty or is it something else?

Using the constructor method is functionally equivalent

class Person {
  constructor() {
    this.myProperty = 'Somethin';
  }
}