모듈화

JavaScript의 Class를 설명할 때 가장 많이 사용하는 예시로는 붕어빵 틀을 얘기한다. 붕어빵 틀(클래스)에 반죽과 소를 넣어 만든 붕어빵(인스턴스)처럼 우리는 클래스를 활용해 JavaScript의 객체나 메소드를 모듈화 해서 사용할 수 있다.

---

모듈화?

붕어빵을 만들 때 필요한 것은 바로 틀(클래스), 반죽과 소(프로퍼티), 그리고 만드는 방법(메소드)이다. 이 모든 게 준비되면 우리는 반죽과 소(프로퍼티)만 입맛에 맞게 넣어 만들면 된다. 이를 우리는 class를 활용해서 붕어빵을 만드는 방법을 모듈화 했다고 할 수 있다.

class Bungeoppang {
	constructor(dough, ingredient) {
        this.dough = dough;
        this.ingredient = ingredient;
	}	
  
    makeBungeo() {
      	console.log(`붕어빵 틀에 ${this.dough}을 붓고, ${this.ingredient}을 넣어 적당히 굽는다.`);
    }
}

const 팥붕 = new Bungeoppang('반죽', '팥');
팥붕.makeBungeo();

const 슈붕 = new Bungeoppang('반죽', '슈크림');
슈붕.makeBungeo();

console.log('맛있는 붕어빵들이 완성되었다!');
/* 붕어빵 틀에 반죽을 붓고, 팥을 넣어 적당히 굽는다.
  붕어빵 틀에 반죽을 붓고, 슈크림을 넣어 적당히 굽는다.
  맛있는 붕어빵들이 완성되었다! */

class 내부의 constructor 를 활용해 class를 생성할 때 필요한 값을 바로 전달해줄 수 있다. constructor(param1, param2, ...) { ... } 를 작성하고, 인스턴스* 시 new Bungeoppang(arg1, arg2, ...) 로 작성하면 된다.

인스턴스 시 인수로 입력한 값이 constructor 로 전달되고, class의 프로퍼티(속성) 로 인지해 클래스 내의 메소드에서 이 값을 활용할 수 있다. 이로 인해 makeBungeo() 메소드에서 this.dough 와 this.ingredient 도 활용해 값을 출력할 수 있게 된다.

*인스턴스: 클래스를 객체화 하는 행위 (붕어빵 틀을 활용해 실제 붕어를 만듦)

constructor를 사용하지 않은 예시도 한 번 봐보도록 하자.

class Calculator {
    add(a, b) { return a + b; }
    subtract(a, b) { return a - b; }
    multiply(a, b) { return a * b; }
    divide(a, b) { return a / b; }
}

const calculator = new Calculator();
console.log(calculator.add(4, 2));       // 6
console.log(calculator.subtract(4, 2));  // 2
console.log(calculator.multiply(4, 2));  // 8
console.log(calculator.divide(4, 2));    // 2

이처럼 인스턴스 시 프로퍼티를 따로 전달하지 않고, 클래스 내의 메소드를 사용할 때 바로 인수를 전달해서 메소드를 이용할 수도 있다.

마지막으로 class 이름은 다른 변수와 구분하기 위해 대문자 로 시작해주면 된다는 점까지 알아가면 된다.

---

붕어빵을 많이 먹는 편은 아니지만 블로그를 작성하면서 먹고 싶어졌다... ໒꒰ྀི◜⤙◝ ꒱ྀི১ 🫘🫘