November 20, 2021 https://www.youtube.com/watch?v=_DLhUBWsRtw

class Person { //청사진, 템플릿
	name; //속성 (field)
	age; //속성 (field)
	speak; //행동 (method)
}

1. Class declarations

class Person {
	//constructor
	constructor(name, age){
		this.name = name;
		this.age = age;
	}
	//methods
	speak() {
		console.log(`${this.name}: hello!`);
	}
}

const ellie = new Person('ellie', 20);
console.log(ellie.name); //ellie
console.log(ellie.age); //20
ellie.speak(); //ellie: hello!

2. Getter and setters

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    // if (value < 0) {
    //   throw Error('age can not be negative');
    // }
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

3. Fields (public, private)

// Too soon! - 아직 사파리에서 지원하지 않음
class Experiment {
  publicField = 2; //public field: 외부에서 접근이 가능한 필드
  #privateField = 0; //private field: 외부에서 접근이 불가능한 필드
	//클래스 내부에서만 값이 보여지고 접근이 되고 값이 변경 가능
}
const experiment = new Experiment();
console.log(experiment.publicField); //
console.log(experiment.privateField);

4. Static properties and methods

// Too soon! - 아직 사파리에서 지원하지 않음
class Article {
  static publisher = 'Dream Coding';
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher); //static은 class로 호출해야만 볼러짐
Article.printPublisher(); //static은 class로 호출해야만 볼러짐

오브젝트나 들어오는 데이터와 상관없이 공통적으로 클래스에서 쓸 수 있는거라면 static을 활용해서 작성하는게 메모리를 절약할 수 있다.

5. Inheritance

// a way for one class to extend another class.
class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color!`);
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); //부모의 draw 사용
    console.log('🔺'); 
  }
  getArea() {
    return (this.width * this.height) / 2;
  }

  toString() {
    return `Triangle: color: ${this.color}`;
  }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea());

: extends를 사용하면 공통 되어지는 애들을 일일이 작성하지 않아도 재사용 할 수 있다.