class 🏙(청사진, 템플릿)

클래스 자체에는 데이터가 들어있지 않고 틀만 지정해 둔 것
데이터 없이 정의만 해 둔것이기 때문에 실제로 메모리에 올라가지 않는다.
오브젝트를 만들기 위한 틀

• template
• declare once
• no data in

Object

클래스를 이용해 데이터를 넣어 만든것이 바로 오브젝트
실제 데이터를 넣으면 메모리에 올라가게 된다.

• instance of a class
• created many times
• data in

클래스 선언하기

객체 지향 프로그래밍 ⇢ Object-oriented programming
class: template
object: instance of a class

Javascript의 classes는 도입된지 얼마 되지 않았다.

• introduces in ES6
  (클래스가 도입되기 전까진 클래스를 정의하지 않고 오브젝트를 만들 수 있었다.
  오브젝트를 만들때 function을 이용해 만들 수 있었다.)
• syntactical sugar over prototype-based inheritance

1. Class declarations

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

// class로 새로운 오브젝트 생성
const ellie = new Person('ellie', 20);

console.log(ellie)

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)

class Experiment {
  publicField = 2;
  #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

4. static properties and methods

static 메소드 : 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다.

오브젝트나 들어오는 데이터에 상관없이 공통적으로 클래스에서 쓸 수 있는거라면 static, static 메소드를 이용해서 작성하는 것이 메모리 사용을 조금 줄여 줄 수 있다.

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(article1.publisher) // undefined
console.log(Article.publisher) // 'Dream Coding'
Article.printPublisher(); // 'Dream Coding'

5. 상속과 다형성 Inheritance and Polymorphism

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 of`);
  }

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

class Rectangle extends Shape() {}
class Triangle extends Shape() {
  // 오버라이딩 된다.
  draw() {
    // 부모의 draw도 호출되면서 추가적으로 호출
    super.draw();
    console.log('▲');
  }
  getArea() {
    return (this.width * this.height) / 2;
  }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();

const triangle = new Triangle(20, 20, 'blue');
triangle.draw();

6. Class checking: instanceOf

클래스를 이용해서 만들어진 새로운 인스턴스이다.
rectangle이 Rectangle 클래스의 오브젝트인지 확인!
true, false 를 리턴

console.log(rectangle instanceof Rectangle); //T
console.log(triangle instanceof Rectangle); //F
console.log(triangle instanceof Triangle); //T
console.log(triangle instanceof Shape); //T
console.log(triangle instanceof Object); //T

Reference

https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6