클래스는 별도 타입의 객체를 생성하는 설계 도면이라 볼 수 있습니다. 예를 들어 붕어빵 틀은 붕어빵을 만들기 위한 틀이라고 볼 수 있는데 여기서 붕어빵은 객체이고 붕어빵 틀이 클래스라고 볼 수 있습니다.
클래스를 통해 객체가 가져야 할 상태와 행위들을 속성과 메소드로 정의 할 수 있습니다. 클래스에서 만들어진 객체들을 인스턴스 라고 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Cart{
constructor(){
this.store = {};
}
}
addProuct(product){
this.store[product.id] = product
}
getProduct(id){
return this.store[id];
}
const cart1 = new Cart()
cart1.addProduct({id : 1, name : '노트북'})
console.log(cart1.store) <-- 실행 결과 {'1', : {id : 1, name: '노트북'}}
const p = cart1.getProduct(1)
console.log(p) <-- 실행 결과 {id : 1, name : '노트북'}
1 코드 설명
class 키워드를 이용해서 Cart 클래스를 정의합니다. 클래스를 정의할 때 클래스명 이후로 중괄호가 오고 그 안을 클래스바디라고 부릅니다.
2 ~ 5 코드 설명
클래스 바디에는 생성자 함수를 작성할 수 있습니다. constructor로 작성하고 매개변수도 정의 할 수 있습니다.그리고 꼭 하나의 생성자만 정의 할 수 있습니다. 생성자는 new 키워드를 통해 객체가 생성될 때 호출이 됩니다.
7 ~ 13 코드 설명
addProduct, getProduct 메소드를 정의합니다. 메소드는 클래스가 생성한 객체를 통해 사용 할 수 있습니다. 17번째 라인에서 cart1 인스턴스를 통해 addProduct를 호출 하는것을 볼 수 있는데 여기서는 전달 받은 product 객체의 id를 store 객체의 키로 하여 객체 자체를 값으로 저장 하고 있습니다. getProduct 메소드를 통해 전달받은 id 인자의 해당하는 product를 반환 합니다.
15 코드 설명
Cart 클래스를 new 키워드를 사용하여 객체를 생성합니다. 이렇게 만들어진 인스턴스를 cart1 변수에 할당 합니다. const를 통해 정의하기 때문에 cart1에는 다른 값을 대입 할 수 없습니다.
17 ~ 19 코드 설명
cart1 인스턴스의 addProduct 메소드에 아이디가 1이고 이름이 노트북인 상품 객체를 전달 하여 호출 합니다. 7~8라인에 정의한대로 store 속성에 1이라는 키에 해당 상품 객체가 값으로 추가 됩니다. 18라인에서 cart1의 store 속성을 출력하면 실제 추가된 내용이 콘솔에 출력 되는것 을 볼 수 있습니다.