[JS] 클래스 예제와 콜백 함수 정리

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

     increase() {
        this.counter++;
        console.log(`counter : ${this.counter}`);
        if(this.counter %5 === 0){
            console.log('yo!')
        }

     }
 }

 const coolCounter = new Counter();

 function printSomething() {
    console.log('yo!')
 }

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

// 문제점 : counter Class 자체에서 yo! 보여주기 때문에 control 할 수가 없음.

 

 

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

     increase(runIf5Times) { // 콜백함수 추가
        this.counter++;
        console.log(`counter : ${this.counter}`);
        if(this.counter %5 === 0){
            runIf5Times(this.counter) // 콜백함수 호출 // counter 추가
        }
     }
 }

 const coolCounter = new Counter();

 // 추가한 콜백함수 선언
 function printSomething(num) { // 인자 추가
    console.log(`yo! ${num}`)
 }

// 또 추가한 다른 기능의 콜백함수 선언
function alertNum(num) { // 인자 추가
    alert(`wow! ${num}`)
}

 // increase 부를때마다 콜백함수를 부른다

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

 coolCounter.increase(printSomething); // counter : 6
 coolCounter.increase(printSomething); // counter : 7
 coolCounter.increase(printSomething); // counter : 8
 coolCounter.increase(printSomething); // counter : 9
 coolCounter.increase(alertNum); // counter : 10
 // yo! 10
 // alert 창 wow 10 

// 장점: Control 가능해짐
// 단점: increase 호출 할때마다 콜백함수를 전달해서 호출해야 함

 class Counter {
     constructor(runEveryFiveTimes) { // 생성자에 콜백함수 추가
        this.counter = 0;
        this.callback = runEveryFiveTimes;
     }

     increase() { // 콜백함수 추가
        this.counter++;
        console.log(`counter : ${this.counter}`);
        if(this.counter %5 === 0){
            this.callback && this.callback(this.counter); // 콜백함수 호출 // counter 추가
        } // typeScript가 아니어서 조건 추가
     }
 }

 // 추가한 콜백함수 선언
 function printSomething(num) { // 인자 추가
    console.log(`yo! ${num}`)
 }

// 또 추가한 다른 기능의 콜백함수 선언
function alertNum(num) { // 인자 추가
    alert(`wow! ${num}`)
}

 // const coolCounter = new Counter(printSomething); // Counter 만들 때, 콜백함수를 넣어서 생성해주어야 함
 const alertCounter = new Counter(alertNum);
 const printCounter = new Counter(printSomething);
 // 입맛에 따라 재사용 가능

 // increase 부를때마다 콜백함수를 부른다

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

 coolCounter.increase(); // counter : 6
 coolCounter.increase(); // counter : 7
 coolCounter.increase(); // counter : 8
 coolCounter.increase(); // counter : 9
 coolCounter.increase(); // counter : 10
 // yo! 10