Javascript : class

class

// class
class Fruit {
  // Constructor: A function called when an object is created with the 'new' keyword.
  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }

  display = () => {
    console.log(`${this.name}: ${this.emoji}`);
  };
}

// apple is an instance of the Fruit class.
const apple = new Fruit('apple', '🍎');

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const youjun = new User('you', 'jun');
const neo = new User('neo', 'anderson');

console.log(youjun.getFullName()); // you jun
console.log(neo.getFullName()); // neo anderson

class level method / instance method 

// static property
class Fruit {
  static MAX_FRUITS = 4;

  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }

  // class level method
  static makeRandomFruit() {
    // Cannot refer to 'this' in class-level methods
    return new Fruit('banana', '🍌');
  }

  // instance method
  display = () => {
    console.log(`${this.name}: ${this.emoji}`);
  };
}

const banana = Fruit.makeRandomFruit();
console.log(banana);
console.log(Fruit.MAX_FRUITS);
// apple is an instance of the Fruit class. The static part is not printed.
const apple = new Fruit('apple', '🍎');


// static example
Math.pow();
Number.isFinite(1);

class Youjun {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  static isUser(user) {
    if (user.firstName && user.lastName) {
      return true;
    }
    return false;
  }
}

const youjun = new Youjun('you', 'jun');
const lewis = {
  name: 'lewis',
  age: 85,
};

console.log(youjun); // Youjun { firstName: 'you', lastName: 'jun' }
// !console.log(User.getFullName()); // error

console.log(Youjun.isUser(youjun)); // true
// !console.log(youjun.isUser()); // error

console.log(Youjun.isUser(lewis)); // false

private(#), public(default), protected

// Access Control - Encapsulation
// private(#), public(default), protected
class Fruit {
  #name;
  #emoji;
  #type = 'fruit';
  constructor(name, emoji) {
    this.#name = name;
    this.#emoji = emoji;
  }
  #display = () => {
    console.log(`${this.#name}: ${this.#emoji}`);
  };
}

const apple = new Fruit('apple', '🍎');
console.log(apple); // The '#' part is not displayed

instanceof

class A {
  constructor() {}
}

class B extends A {
  constructor() {
    super();
  }
}

class C extends B {
  constructor() {
    super();
  }
}

const a = new A();
const b = new B();
const c = new C();

console.log(a instanceof A); // true
console.log(a instanceof B); // false
console.log(a instanceof C); // false

console.log(c.constructor === A); // false
console.log(c.constructor === B); // false
console.log(c.constructor === C); // true

const fruits = ['apple', 'banana'];
console.log(fruits.constructor === Array); // true
console.log(fruits instanceof Array); // true

Accessor property / getter, setter

// class User {
//   constructor(first, last) {
//     this.firstName = first;
//     this.lastName = last;
//     this.fullName = `${first} ${last}`;
//   }
// }

// const heropy = new User('heropy', 'park');

// console.log(heropy); // User { firstName: 'heropy', lastName: 'park' }

// heropy.firstName = 'Neo';

// console.log(heropy); // User { firstName: 'Neo', lastName: 'park', fullName: 'heropy park' }

// Since the above results come out, you need to create a method as follows.

// class User {
//   constructor(first, last) {
//     this.firstName = first;
//     this.lastName = last;
//   }
//   getFullName() {
//     return `${this.firstName} ${this.lastName}`;
//   }
// }

//! getter, setter

// You can use functions like properties by using get / set .

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  set fullName(value) {
    console.log(value);
    [this.firstName, this.lastName] = value.split(' ');
  }
}

const heropy = new User('heropy', 'park');

console.log(heropy.fullName); // heropy park

heropy.firstName = 'Neo';

console.log(heropy.fullName); // Neo park

heropy.fullName = 'Neo Anderson'; // Neo Anderson

console.log(heropy); // User { firstName: 'Neo', lastName: 'Anderson' }

Inheritance

class Vehicle {
  constructor(acceleration = 1) {
    this.speed = 0;
    this.acceleration = acceleration;
  }

  accelerate() {
    this.speed += this.acceleration;
  }
  decelerate() {
    if (this.speed <= 0) {
      console.log('stop');
      return;
    }
    this.speed -= this.acceleration;
  }
}


class Bicycle extends Vehicle {
  constructor(price = 100, acceleration) {
    super(acceleration); // call constructor above.
    this.price = price;
    this.wheel = 2;
  }
}

const bicycle = new Bicycle(300, 2);
bicycle.accelerate();
bicycle.accelerate();
console.log(bicycle); // Bicycle { speed: 4, acceleration: 2, price: 300, wheel: 2 }
console.log(bicycle instanceof Bicycle); // true
console.log(bicycle instanceof Vehicle); // true


class Car extends Bicycle {
  constructor(license, price, acceleration) {
    super(price, acceleration);
    this.license = license;
    this.wheel = 4;
  }
  
    stop() { // add property
    console.log('stop');
  	}

  // Overriding
  accelerate() {
    if (!this.license) {
      console.error('no-license');
      return;
    }
    this.speed += this.acceleration;
    console.log('accelerate', this.speed);
  }
}

const carA = new Car(true, 7000, 10);
const carB = new Car(false, 4000, 6);
carA.accelerate();
carA.accelerate();
console.log(carA);
// accelerate 10
// accelerate 20
// Car {
//   speed: 20,
//   acceleration: 10,
//   price: 7000,
//   wheel: 4,
//   license: true
// }
carB.accelerate();
console.log(carB);
// Car {
//     speed: 0,
//     acceleration: 6,
//     price: 4000,
//     wheel: 4,
//     license: false
//   }
// no-license
console.log(carA instanceof Car); // true
console.log(carB instanceof Bicycle); // true
console.log(carB instanceof Vehicle); // true


class Boat extends Vehicle {
  constructor(price, acceleration) {
    super(acceleration);
    this.price = price;
    this.motor = 1;
  }
}

const boat = new Boat(10000, 5);
console.log(boat); // Boat { speed: 0, acceleration: 5, price: 10000, motor: 1 }
console.log(boat instanceof Bicycle); // false