클래스 (Class)

Class

객체는 말 그대로 object 사물을 뜻한다
그리고 클래스는 결국 {num :1 } 처럼 생긴 객체를 잘 설계하기 위한 틀이라고 볼 수 있다
객체를 정의,생성 할수도 있지만
클래스로 만들면 여러 객체를 더 쉽게 만들 수 있다
그런데 이 때의 객체는 특정 로직을 갖고 있는 행동(method) 와 변경 가능한 상태를 지닌다

객체와 Class

다음 예제를 살펴보자

let ray = {  
  name: 'Ray',  
  price: 2000,     
  carDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

const rayValue = ray.carDiscount(0.1);
console.log(rayValue) // 200

ray 객체는 3개의 프로퍼티를 가지고 있다

• name
• price
• carDiscount: 객체의 값에는 함수도 넣을 수 있다

ray 의 정보를 또 생성해야 할 때 똑같은 프로퍼티를 가진
객체를 다시 생성해야한다
하지만 ray 정보를 담은 calss 를 생성하여 보다 보기 편하고
간단하게 관리할 수 있다

Class로 객체 생성, 살펴보기

const cocar = new Car('Cocar', 2000);

• 객체는 new 클래스명() 으로 생성할 수 있다
• 소괄호() 안에는 객체를 생성할 때 전달하고 싶은 값을 넘겨준다

class Car { 
  constructor(name, price) { // 2. 
    this.name = name; // 3.
    this.price = price; 
    this.department = "서울지점";
    this.salesAmount = 0;
  }
}

const cocar = new Car('Cocar', 2000); // 1. 
console.log(cocar); //4. { name: 'Cocar', price: 2000, department: '서울지점', salesAmount: 0 }
console.log(cocar.name); //Cocar
console.log(cocar.price); //2000

0. 클래스 내에 정의된 함수를 메서드라고 한다
   
   
1. 클래스를 통해 생성된 객체 = 인스턴스, -> const cocar = 인스턴스이다
   Car 클래스의 인스턴스를 생성할때마다 constructor() 메서드를 호출함
   - new키워드와 소괄호()를 사용하여 호출할 수 있다
   - 클래스 이름은 항상 대문자로 시작한다
   
   
2. 호출되는 constructor() 메서드, (name,price) 인자를 받고있다
   인자인 name과 price를 사용해 Car class를 통해 생성되는 인스턴스의 name,price 프로퍼티 값을 할당한다
   - constructor는 Class에서 필요한 기초 정보를 세팅하는 곳
   객체를 new로 생성할 때 가장먼저 자동으로 호출되는 곳이다
   - constructor() 메서드에서 name과 price,
   2개의 매개변수로 Car 인스턴스의 name, price 프로퍼티에 값을 할당
   
   
3. this는 해당 본인 객체를 의미
   클래스 내에서 name, price와 같이 변경 가능한 상태값이자
   class내의 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다
   멤버 변수는 this 키워드로 접근한다
   클래스 내에서 메서드끼리 소통하기 위해서는 this가 필요하다
   
   
4. Car 클래스로 객체를 생성하면 4.와 같은 객체가 만들어진다

this를 좀 더 살펴보자

class Car {
  constructor(name, price) {
    this.carName = name;
    this.carPrice = price;
    this.department = '서울지점';
  }

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

let carObj = new Car("bmw",2000)
console.log(carObj) 
//{
  carName: "bmw",
  carPrice: 2000,
  department: "서울지점"
}

this를 통해서 또 다른 본인의 메서드로 접근 하기 위해서 필요하다
constructor의 매개변수 name,price는
자신의 메서드인 constructor { } 안에서만 쓰일 수 있다
또 다른 자신의 메서드인 applyDiscount { } 와 소통 할 수 있게
let carObj = new Car("bmw",2000) 이처럼
메서드를 만들었을 때 본인 스스로를 의미하는 this이며,
.carName, .carPrice, .department은 프로퍼티를 의미한다
이곳에 input으로 받은 name,price 값을 저장시킨다

클래스로 또 다른 메서드를 추가해보자

class Car {
  constructor(name, price) {
    this.carName = name;
    this.carPrice = price;
    this.department = '서울지점';
  }

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

let carObj = new Car("bmw",2000)
console.log(carObj)

let carSonata = new Car("sonata",3000)
console.log(carSonata) 

console.log(carSonata.applyDiscount(0.1))

{
  carName: "bmw",
  carPrice: 2000,
  department: "서울지점"
}
{
  carName: "sonata",
  carPrice: 3000,
  department: "서울지점"
}

300

결과는 위 처럼 나온다