How does Dot Notation access values in class?

[lowkim50]

class Surgeon {
  constructor(name, department) {
    this._name = name;
    this._department = department;
    this._remainingVacationDays = 20;
  }
  
  get name(){
    return this._name;
  }
  
  get department(){
    return this._department;
  }
  
  get remainingVacationDays(){
    return this._remainingVacationDays;
  }
  
  takeVacationDays(daysOff){
    this._remainingVacationDays -= daysOff;
  }
}

const surgeonCurry = new Surgeon('Curry', 'Cardiovascular');
const surgeonDurant = new Surgeon('Durant', 'Orthopedics');

console.log(surgeonCurry.name);
surgeonCurry.takeVacationDays(3);
console.log(surgeonCurry.remainingVacationDays());

As shown, I have a class which contains getters and methods. And outside of the block I logged some values which happen to have a dot notation syntax. So for example this: console.log(surgeonCurry.name);. I don’t get how like surgeonCurry DOT name gets it’s value by using the DOT, im not getting the function behind what the DOT does can someone explain it to me.
Pardon me as I am new and might get terms wrongly.
Thx alot in advance m8~~

[Paul_Wilkins]

A class doesn’t really exist in JavaScript, instead it’s used as syntactic sugar to create a prototypal structure.

In that example, name, department, and remainingVacationDays are all available as accessor methods of the Surgeon object, which are all accessed via the dot-notation method.

You can find more about classes over at the Classes documentation page.

[m3g4p0p]

Hi @lowkim50, the dot notation is called a property accessor. Maybe it’s easier to understand with plain objects instead of classes:

const person = {
  _firstName: 'Bruce',
  _lastName: 'Wayne'
}

console.log(person._firstName + ' ' + person._lastName)

So if you want to discourage using such internal pseudo-private properties directly (usually denoted by a leading underscore as you did), or if getting the value involves some further computations, you’d “traditionally” write a getter method:

const person = {
  _firstName: 'Bruce',
  _lastName: 'Wayne',
  
  getName () {
    return this._firstName + ' ' + this._lastName
  }
}

console.log(person.getName())

But JS allows you to write such getter methods in a way so that they behave like regular properties using the getter syntax:

const person = {
  _firstName: 'Bruce',
  _lastName: 'Wayne',
  
  get name () {
    return this._firstName + ' ' + this._lastName
  }
}

console.log(person.name)

Another way to achieve this is by defining properties later on like so:

const person = {
  _firstName: 'Bruce',
  _lastName: 'Wayne'
}

Object.defineProperty(person, 'name', {
  get () {
    return this._firstName + ' ' + this._lastName
  }
})

console.log(person.name)

This last approach also gives you some more control, like defining properties as configurable or enumerable. Check out the links for details! :-)

[lowkim50]

Ouhh icic, thx man I will be sure to read up on the links!!