클래스와 콜백함수

🤔 클래스 구현

문법적인 내용을 함께 설명하면 글이 길어져서 눈에 잘 들어올 거 같지 않아 실용적인 예시를 중심으로 정리하겠다.

class Counter {
  constructor() {
    this.counter = 0;
  }

  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 10 === 0) {
      console.log("10의 배수입니다.", this.counter);
    }
  }
}

const myCounter = new Counter();
myCounter.increase();
myCounter.increase();
myCounter.increase();

클래스를 정의하고 increase 메서드를 이용해서 counter 변수를 하나씩 늘려가보았다. 그러다가 10의 배수를 만나면 콘솔창에 출력을 해보았다.
만일 10의 배수를 출력하는 것이 아니라 alert 창을 띄워주고 싶다면 어떻게 해야할까?
지금 코드로는 방법이 없다. 우리는 그냥 만들어진 클래스 내부의 메서드에 접근하여야 한다. 확장성이 떨어진다.

---

class Counter {
  constructor() {
    this.counter = 0;
  }

  increase(callback) {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 10 === 0) {
      callback(this.counter);
    }
  }
}

const myCounter = new Counter();

function alertNumber(num) {
  alert(`${num}은 10의 배수입니다.`);
}
myCounter.increase(alertNumber);
myCounter.increase(alertNumber);
myCounter.increase(alertNumber);

이렇게 클래스 내부 메서드의 인자에 콜백 함수를 전달하게 되면 우리는 다른 작업을 원할 때마다 콜백 함수만 변경해서 메서드의 인자로 전달하면 된다. 이전 코드에는 그냥 만들어진 메서드를 수동적으로 사용하는 느낌이라면 이제는 우리가 원하는 작업을 능동적으로 할 수 있다.
함수는 일급 객체 이므로 다른 함수의 인자로 전달할 수 있고 함수의 이름은 함수의 레퍼런스를 가지고 있기 때문에 메서드의 인자로 함수의 참조값이 전달된다고 보면 된다.

---

하지만 위의 코드도 문제가 있다. 매번 콜백 함수를 메서드의 인자로 전달해야되는 불편함이 있다. 이를 해결하기 위해서는 생성자에 콜백 함수를 전달하면 된다.

class Counter {
  constructor(doSomething) {
    this.counter = 0;
    this.callback = doSomething;
  }

  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 10 === 0) {
      this.callback && this.callback(this.counter);
    }
  }
}

function alertNumber(num) {
  alert(`${num}은 10의 배수입니다.`);
}

const myCounter = new Counter(alertNumber);

myCounter.increase();
myCounter.increase();
myCounter.increase();

만일 생성자에 콜백 함수가 전달되지 않으면 기능이 실행되지 않기 때문에 AND 연산자를 이용하여 this.callback 이 참이면 콜백 함수를 실행하도록 하였다.

---

🌟 느낀점

클래스 내부의 메서드가 한 동작만 수행하도록 구현하는 것이 아니라 콜백 함수를 전달하면서 하나의 클래스로 다양한 동작을 수행하도록 만들 수 있다는 점을 깨달았다. 가능하면 클래스를 완전체로 만드는 것보다 조립하듯이 우리가 원하는 기능을 수행하도록 만드는 것이 좋다는 것을 알았다.