나의 개발 족보

Counter라는 class는 처음에 생성이 되면 counter라는 변수가 0으로 초기화된다.

해당 class에는 increase라는 함수도 있다.

class Counter {

  constructor() {

   this.counter = 0;



  }

  increase() { // class에서 함수를 작성할 때는 function 생략 가능

    this.counter ++;

    if(this.counter % 5 === 0) {

      console.log("yo!");

    }

  }

}

===========================

const coolCounter = new Counter();

coolCounter.increase();

coolCounter.increase();

coolCounter.increase();

coolCounter.increase();

coolCounter.increase();

위와 같이 객체를 생성 후 increase() 함수를 5번 호출하게 되면 "yo"라는 문구가 console 창에 출력된다.

하지만 이렇게 사용하게 되면 if 내부 (console.log("yo!");) 를 컨트롤하는 것이 쉽지 않다.

대안으로는 callback 함수를 전달하는 방법이 있다.

개선1

Counter class

increase(runIf5Times) { 

    this.counter ++;

    if(this.counter % 5 === 0) {

      runIf5Times(this.counter); // 해당 counter를 출력하고 싶을 때 counter를 전달한다.

    }

  }

===========================

const coolCounter = new Counter();

function printSomething(num) {

  console.log(`yo! ${num}`);

}

coolCounter.increase(printSomething);

coolCounter.increase(printSomething);

coolCounter.increase(printSomething);

coolCounter.increase(printSomething);

coolCounter.increase(printSomething);

위와 같이 구성할 경우 장점은 함수를 자신의 요구 사항에 맞게 전달할 수 있다.

console 출력을 alert으로 함수 변경

function alertNum(num) {

  alert(`yo! ${num}`);

}



coolCounter.increase(alertNum);

coolCounter.increase(alertNum);

coolCounter.increase(alertNum);

coolCounter.increase(alertNum);

coolCounter.increase(alertNum);

개선2

increase 함수를 호출할 때마다 callback 함수를 전달하니 불편하다.

대안으로 constructor에서 callback 함수를 받아서 class 자체에서 기억하도록 한다.

Counter class를 만들 때 원하는 콜백 함수를 생성자에 전달해 준다. 

Counter class

class Counter {

  constructor(runEveryFiveTimes) {

   this.counter = 0;

   this.callback = runEveryFiveTimes;

  }

  increase() {

    this.counter ++;

    if(this.counter % 5 === 0) {

      this.callback(this.counter);

      if(this.callback) {        // 사용자가 callback 함수를 넘겨줄 때만 실행되도록 

        this.callback(this.counter);

      } => this.callback && this.callback(this.counter);     // 한줄로 개선 가능

    } 

  }

}

===========================

const consoleCounter = new Counter(printSomething); // console Counter class

const alertCounter = new Counter(alertNum); // alert Counter class

function printSomething(num) {

  console.log(`yo! ${num}`);

}

function alertNum(num) {

  alert(`yo! ${num}`);

}

consoleCounter.increase();

consoleCounter.increase();

consoleCounter.increase();

consoleCounter.increase();

consoleCounter.increase(); // console에 yo! 5 출력

참고

- 자바스크립트 기초4. 클래스 | 클래스 예제와 콜백 함수 최종 정리