[JS] class 조금 더 알아보기

드림코딩 by 엘리 강의를 보고 정리했습니다.

코드스쿼드 마스터즈 코코아 과정의 3주차에 class를 나누어 todo list 만들기 미션이 있었다. class라는 걸 알고는 있었지만 적극적으로 사용해본 적은 없어서 어떤 기준으로 class를 나누어야 하는지, constructor에는 어떤 내용을 넣으면 좋은지 감이 잡히지 않았다. + MVC 패턴 등 디자인 패턴에 대한 것들도 완전 처음 들어봐서 혼돈의 카오스였다. ㅋㅋㅋ ㅠㅠ

이런 구조가 머리로 이해가 안되면 코드 작성을 시작조차 못하는 스타일이라 약간 자괴감이 들기도 하고 피하고 싶기도 하는 마음... 그래도! 공부를 더 하다가 예전에 봤던 엘리님 영상을 다시 보니 이해가 잘 되는 부분이 있어서 정리를 해보려고 한다.

호출될 때마다 카운트를 하나씩 올리는 class를 만들어보자.

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
  }
}

const coolCounter = new Counter();
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3

constructor 에는 객체가 생성됨과 동시에 필요한 값을 넣어주면 되는 것이다.
그럼 여기서, counter가 5의 배수가 될 때마다 알려주는 기능을 넣어보자.

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) { // 추가된 부분
      console.log('yo!');
    }
  }
}

const coolCounter = new Counter();
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
coolCounter.increase(); // 4
coolCounter.increase(); // 5 
						// yo!

Counter 클래스 안의 increase 라는 메소드에 직접 추가를 해주었다. 여기서 문제점이 있다!! Counter 클래스 자체에 들어있기 때문에 사용자가 조절을 할 수가 없다. 만약에 yo! 가 아니라 다른 내용을 출력하고 싶다면? 혹은 console.log 가 아니라 alert 로 하고 싶다면?

흐음. 그러면 increase에게 콜백함수로 전달해보자.

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase(runIf5Times) {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      runIf5Times();
    }
  }
}

const coolCounter = new Counter();
function printSomethig() {
  console.log('yo!');
}
coolCounter.increase(printSomethig); // 1
coolCounter.increase(printSomethig); // 2
coolCounter.increase(printSomethig); // 3
coolCounter.increase(printSomethig); // 4
coolCounter.increase(printSomethig); // 5 
									// yo!

• 장점 : 조절이 가능해진다. yo! 대신 wow! 로 쉽게 바꿀 수 있고, alert되는 함수를 추가하는 것도 가능하다.
  즉, Counter 라는 클래스에는 5배수가 될때마다 어떤 동작을 할 지는 결정되어 있지 않다.
  그런데 여기서 또 문제점이 있다. increase 함수를 호출할 때마다 콜백함수를 전달해주려니 너무 귀찮다.
  그래서 보통은 아예 constructor에서 콜백함수를 받는다 !!

class Counter {
  constructor(runEveryFiveTimes) {
    this.counter = 0;
    this.callback = runEveryFiveTimes;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      this.callback();
    }
  }
}
function printSomethig() {
  console.log('yo!');
}

const coolCounter = new Counter(printSomethig); // 생성자에 콜백함수 전달

coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
coolCounter.increase(); // 4
coolCounter.increase(); // 5 
						// yo!

만약에 객체를 생성할 때 콜백함수를 넘겨주지 않으면 어떻게 될까?
new Counter() 그냥 이렇게만 쓰면, constructor에서 runEveryFiveTimes가 undefined 이 되면서 에러가 발생한다.
이를 방지하기 위해서는 undefined인지 아닌지 확인을 하고 undefined이 아닐 때만 콜백을 불러야 한다.

increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      this.callback && this.callback(); // 이 조건을 추가해주면 된다.
    }
  }

&& 연산자의 특성 (앞쪽이 true일 때 뒤쪽이 실행) 을 이용하여 조건을 추가해준다. 참고로 this.callback 이라고만 써도 true인데, false 값을 제외한 모든 값은 true이기 때문이다.

정리

• 클래스에 원하는 기능을 다 정의하게 되면 사용자가 자세하게 컨트롤할 수도 없고 재사용성이 떨어진다.
• 콜백함수를 이용해서 클래스를 만들면 사용자가 입맛에 맞게 만들 수 있다.
• 하나의 클래스로 다양한 오브젝트를 만들어서 서로 다른 기능을 수행하도록 할 수 있다. (재사용 up)
• 클래스를 완전체로 만들기보다는, 원하는 기능을 끼워맞춰 재조립이 가능하도록 만들자!