자바스크립트에서 클래스

클래스

자바스크립트에도 클래스가 있다. 기존에는 없었지만 ES6에 클래스 문법이 추가됐다고 한다.

그래서 클래스가 뭘까

A JavaScript class is a blueprint for creating objects.

MIT 에서는 클래스란 객체 생성을 위한 청사진 이라고 나와있다.

좀 더 쉽게는 사수분께서 나에게 설명하기를 클래스를 이해하려면 붕어빵을 생각해보라고 했다.
붕어빵 그 자체가 아닌 붕어빵을 만들기 위한 틀 이 곧 클래스라고 했다.

물론 정확한 설명은 아니라고 했지만 대략 이렇게 이해하면 쉽다.

그러면 클래스는 어떻게 사용될까?
별거 없다. 그냥 class라고 선언하면 끝이다.

class FishBread {
	constructor (stuff, bake, price, count) {
      this.stuff = stuff;
      this.bake = bake;
      this.price = price * count;
      this.count = count;
    }
	
  	buyLotCheap(){
        if (this.count === 3 || this.count === 4) {
            return this.price -= 100
        }else if(this.count >= 5){
            return this.price *= 0.9
        }

        return null
    }
} 
let redBeanFishBread = new FishBread('redBean', '빠삭하게', 500, 5); 
console.log(redBeanFishBread);
redBeanFishBread.buyLotCheap(); // 2250

// FishBread {stuff: 'redBean', bake: '빠삭하게', price: '500원'}

가격 변경등도 신경 써야 하지만 여기까지만 하자...

이렇듯 class 라는 문법으로 FishBread 라는 클래스를 선언하고 내부에 constructor 라는 문법으로 FishBread의 초기 값을 선언 할 수 있고,
구매 가격에 따른 가격을 변동해줄 buyLotCheap 이라는 메서드를 정의해줬다.

class MiniFishBread extends FishBread { 
    constructor(stuff, bake, price, count, size) {
        super(stuff, bake, price, count)
        this.size = size;
    }
}

let miniBread = new MiniFishBread('슈크림', '부드럽게', 300, 5, 'mini')

console.log(miniBread) //MiniFishBread {stuff: '슈크림', bake: '부드럽게', price: 1500, count: 5, size: 'mini'}

miniBread.buyLotCheap() // 1350

이런식으로 extends 를 사용해서 FishBread 라는 상위 클래스를 내려 받아 사용 할 수 있다. 기존 FishBread 에서의 초기 값을 갖고오고 싶으면 super 를 사용해서 유지해줄 수 있고, 상위 클래스의 메서드 또한 그대로 사용이 가능하다.(프로토타입 체이닝)

그러면 왜 쓸까?

위에 코드를 보면서 느꼈을 수도 있겠지만, 다시 상단 예시로 설명을 하자면
만약 당신이 붕어빵 만드는 사람인데 붕어빵을 만들 때 마다 틀을 어디에 둔지 몰라서 틀을 다시 사야 된다고 생각해보자 굉장히 비효율적이지 않을까?

튼튼한 틀을 하나 만들어 두고 팥이나 슈크림만 바꿔서 넣어서 파는게 가장 효율적일것이다.

우리는 코드의 재사용성을 극대화해야하고 쓸데없는 중복 코드 작성을 지양해야 한다.
Class와 extends 를 이용해서 일관성있는 객체들을 생성하고 기능 확장을 해줘야 하는 것이다.