TIL26 - JS - Classes

Classes are used to create object instances

1. Creating Class

Syntax

class ClassName {
  constructor(parameter1, parameter2, ...) {
    this._parameter1 = parameter1;
    this._parameter2 = parameter2;
    ...
  }
  get parameter1() {
    return this._parameter1;
  }
  get parameter2() {
    return this._parameter2;
  }
  set parameter2(newVal) {
    this._parameter2 = newVal;
  }
  classMethod1() {
    code block;
  }
  classMethod2() {
    code block;
  }
  ...
}

• start with the class keyword
• class naming convention is to capitalize and use CamelCase
• the constructor method is executed every time the class is called to create an instance of it
• the constructor method takes parameters which will be the property values for the instance of the class created
• after the constructor method, you can add getter and setter methods and also other class methods that would define the class
• it's important to note that you don't separate the class methods with ,

2. Creating Instances of Class

Syntax

const classInstance = new Class(parameter1, parameter2, ...);

We use the new keyword to create an instance of a class

3. Inheritance

You can create classes that inherit certain properties and methods from another class

For example, you can create InvestmentBanker and Trader classes that inherit the Financier class
> In this case, the Financier class is the parent class and the InvestmentBanker and Trader classes are each a child class

Syntax

The parent class:

class Financier {
  constructor(name, age) {
    this._name = name;
    this._age = age;
    this._industry = 'Finance';
    this._remainingVacDays = 25;
  }
  get name() {
    return this._name;
  }
  get age() {
    return this._age;
  }
  get industry() {
    return this._industry
  }
  get remainingVacDays() {
    return this._remainingVacDays;
  }
  takeVacation(daysOff) {
    this._remainingVacDays -= daysOff;
  }
}

The child class:

class Trader extends Financier {
  constructor(name, age, avgReturn) {
    super(name, age);
    this._avgReturn = avgReturn;
    this._overHoursAcc = 0;
  }
  get avgReturn() {
    return this._avgReturn;
  }
  get overHoursAcc() {
    return this._overHoursAcc;
  }
  overHours(hours) {
    this._overHoursAcc += hours;
    while (this._overHoursAcc >= 8) {
      this._overHoursAcc -= 8;
      this._remainingVacDays++;
    }
  }
}

• The child class is created by connecting to the parent class with the extends keyword -> this makes the methods of the parent class available in the child class
• The constructor method of the child class should begin with the super keyword with the parameters -> this makes the properties of the parent class available in the child class
• After the super keyword, we then add the properties specific to the child class
• It is important to note that the super keyword must come before any this keyword* in the subclass's constructor
• Since the extends keyword automatically brings all of the parent class's methods available to the child class, after the constructor method, we only need to add additional methods that apply just to the child class

4. Static Methods

You can set certain methods to be static using the static keyword

Static Methods are methods that can only be called directly from the class, but cannot be called from an instance of the class

Syntax

class Student {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
  get name() {
    return this._name;
  }
  get age() {
    return this._age;
  }
  static generateId() {
    let randomId = Math.floor(Math.random() * 10000);
    return randomId;
  }
}

• The generateId() method can only called from the Student class directly. It cannot be called from any instance of the class

console.log(Student.generateId());
// Prints a random number between 0 and 9,999

const studentJohn = new Student('John', 15);
console.log(studentJohn.generateId());
// results in TypeError