Class

● Class

class란?

객체(object)의 설계도라고도 할수 있으며 , 큰 규모의 객체이거나 비슷한 모양의 객체를 계속 만들때 class라는 설계도를 통해 간략하게 만들수 있습니다.

복습겸 먼저 객체를 이용해 예를 들어 보겠습니다.

let pizza = {  
  name: 'Pizza',  
  price: 15000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  // property값 에도 함수 사용가능
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

※ 위에 객체에 접근을 해보자면

console.log(pizza.price); // property명으로 접근 (
//결과 15000
console.log(pizza.getPrice()); // 함수로 접근 (1)
//결과 15000
console.log(pizza.applyDiscount(0.1)); //함수로 접근(2)
//결과 1500

하지만 다른 메뉴들을 추가하는 경우가 자주 생기면 코드가 많이 늘어나게 되고 볼 것도 많아 지게 됩니다.

이럴 때 , 필요한 정보를 담은 Menu라는 'Class'를 생성해 관리 할 수 있습니다.

● 생성자(Constructor)

class는 객체(object)와 문법이 비슷합니다.
둘의 가장 큰 차이는 Constructor 라는 생성자 함수 입니다.

class Menu {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
} 

class는 새로운 instance를 생성할 때마다 constructor()메서드를 호출합니다.

● Menu는 class이름입니다. 항상 '대문자'로 시작하고 ,CamelCase로 작성합니다.
● Menu class의 instance를 생성할때마다 constructor메서드가 호출됩니다.
● constructor()메서드는 (name,price)와 같이 2개의 argument(인자)를 받습니다.
● constructor()메서드에 this 키워드를 사용했습니다. class의 실행범위(context)에서 this는 해당 instance를 의미합니다.
● 이렇게 class 내에서 name.price와 같이 변경 가능한 상태값이자 class내의 context에서 어느 곳에서나 사용 할 수 있는 변수를 '멤버 변수'라고 부릅니다.
● 멤버 변수는 'this' 키워드로 접근합니다.

● 인스턴스 (Instance)

class를 통해 생성된 객체를 Instance(인스턴스)라고 부르며 ,
인스턴스는 class의 property이름과 method를 갖는 객체 입니다.

const pasta = new Menu('Pasta', 12000);

● 인스턴스는 class이름에 new를 붙여서 생성합니다.
● 클래스 이름 우측에 ()괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨줍니다.
● Menu 클래스의 인스턴스를 pasta라는 변수에 저장했습니다.
● 'Pasta'라는 String과 12000이라는 Number를 Menu 생성자에 넘겨주었고, (name,price) 프로퍼티에 각각 값이 할당 되었습니다.

새로운 메뉴를 등록해 봅시다.

class Menu {
  constructor(name, price,department) {
    this.name = name;
    this.price = price;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
}

const steak = new Menu('Steak', 30000);
console.log(steak);
console.log(steak.name);
console.log(steak.price);
console.log(steak.applyDiscount(0.5)); //const steak 부터 인스턴스 

/*결과
Menu { name: 'Steak', price: 30000 }
Steak
30000
15000
*/

출처 : Wecode