클래스(Class)

ES6에서 등장한 클래스(Class)는 기존 프로토타입 기반 객체지향 프로그래밍보다 단순한 명료한 새로운 문법을 제시하고 있다. 하지만 클래스는 기존 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체 지향 모델을 제공하는 것은 아니라, 기존 프로토 타입 기반 패턴의 문법적 설탕(Syntactic Sugar)된 것 이다.

즉, 클래스는 붕어빵을 만들기 위한 틀 모양의 템플릿(Template)이고, 객체는 붕어빵 틀을 사용해서 만들어진 붕어빵을 객체(Instance)라고 부른다.

생성자(Constructor)

클래스 필드(Class Field)는 클래스 내부의 캡슐화된 변수로 멤버 변수라고 한다. 클래스 필드의 선언과 초기화는 반드시 생성자(Constructor) 내부에서 실시해야 한다.

생성자(constructor)는 인스턴스를 생성하고 클래스 필드(Class Field)를 초기화 하기 위한 특수한 메서드이다.

쉽게 말하면 우리가 붕어빵을 만든다고 가정할 때 필요한 재료를 정의한 곳 이라고 생각하면 된다.

class FishBread {
  constructor(ingredient, num, price) {
    this.ingredient = ingredient;
    this.num = num;
    this.price = price;
  }
  
  // 계산
  counting() {
    console.log(`total  price is: ${this.num * this.price} 🎀`);
  }
}

객체(Instance)

위에서 클래스를 정의해놨다면, 이제 객체를 만들 차례이다. 객체를 만드는 방법은 정의한 클래스 이름과 new 연산자와 함께 호출하면 클래스를 통해서 객체, 다른 말로는 인스턴스(Intance)가 생성된다.

const pizzaBread = new FishBread("pizza", 5, 1500);
const puffBread = new FishBread("puff", 3, 1000);

정적 메서드(Static Method)

클래스의 정적 메서드를 정의할 때에는 static 키워드를 사용한다. 정적 메서드에 대한 특징은 인스턴스를 생성하지 않아도 호출 할 수 있다는 점이다. 즉, 클래스의 이름으로 호출해야 된다.

class FishBread {
  constructor(ingredient, num, price) {
    this.ingredient = ingredient;
    this.num = num;
    this.price = price;
  }
  
  // 만들기
 static making() {
    console.log(`${this.ingredient} 🥣`);
  }
}

console.log(FishBread.making("pizza"));  // undefined 🥣

Getter

Getter는 클래스 필드의 접근할 때마다 클래스 필드의 값을 조작하는 행위가 필요할 때 사용한다. Getter를 사용할 때에는 메서드 이름 앞에 get 키워드를 사용하여 정의하고, 이 때 사용해 정의한 메서드의 이름은 클래스 필드 이름처럼 사용된다.

getter는 호출하는 것이 아니라, 프로퍼티를 참조하는 형식으로 사용한다. 즉, 무언가를 취득할 때 사용하므로 반드시 무언가를 반환해야 한다.

Setter

Setter는 클래스 필드에 값을 할당할 때 마다 클래스 필드의 조작하는 행위가 필요할 때 사용한다. Setter는 사용할 때에 메서드 이름 앞에 set 키워드를 사용하여 정의하고, 이 때 사용해 정의한 메서드의 이름은 클래스 필드 이름처럼 사용된다.

Setter는 호출하는 것이 아니라, 프로퍼티 처럼 값을 할당하는 형식으로 사용하며 할당 시에 메서드가 호출된다.

class FishBread {
  constructor(ingredient, num, price) {
    this.ingredient = ingredient;
    this.num = num;
    this.price = price;
  }

  get counting() {
    return this.price;
  }

  set counting(value) {
    this.price = value * this.num;
  }
}

const pizzaBread = new FishBread("pizza", 5, 1500);
pizzaBread.counting = 1300;
console.log(pizzaBread.counting); // 6500