Javascript12(reFactoring_class) feat.Ellie

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

  // class 내부에서는 함수 선언시 function을 안붙여줘도 된다
  // 이렇게 내부에서 실행이 되면 외부에서 제어하지를 못한다!
  increase() {
    this.counter++;
    if (this.counter % 5 === 0) {
      console.log(this.counter);
    }
  }

  increase(runIf5Times) {
    this.counter++;
    if (this.counter % 5 === 0) {
      runIf5Times(this.counter);
    }
  }
}

const coolCounter = new Counter(); // counter라는 변수에 0이 초기화 된다
coolCounter.increase(); // counter가 1이 증가 된다, 1
coolCounter.increase(); // counter가 1이 증가 된다, 2
coolCounter.increase(); // counter가 1이 증가 된다, 3
coolCounter.increase(); // counter가 1이 증가 된다, 4
coolCounter.increase(); // counter가 1이 증가 된다, 5, console출력

function printSomething(num) {
  console.log(`yo! ${num}`);
}
coolCounter.increase(printSomething); // counter가 1이 증가 된다, 1
coolCounter.increase(printSomething); // counter가 1이 증가 된다, 2
coolCounter.increase(printSomething); // counter가 1이 증가 된다, 3
coolCounter.increase(printSomething); // counter가 1이 증가 된다, 4
coolCounter.increase(printSomething); // counter가 1이 증가 된다, 5, console출력

function alertNum(num) {
  alert(`yo! ${num}`);
}
coolCounter.increase(alertNum); // counter가 1이 증가 된다, 1
coolCounter.increase(alertNum); // counter가 1이 증가 된다, 2
coolCounter.increase(alertNum); // counter가 1이 증가 된다, 3
coolCounter.increase(alertNum); // counter가 1이 증가 된다, 4
coolCounter.increase(alertNum); // counter가 1이 증가 된다, 5, alert출력

===========================================================
하지만 문제는 매번 호출과 입력을 해줘야 하기 때문에 좋지 못한다!
===========================================================

class Counter {
    constructor(runEveryFiveTimes) {
      this.counter = 0;
      this.callback = runEveryFiveTimes;
    }
  
    // class 내부에서는 함수 선언시 function을 안붙여줘도 된다
  
    increase() {
      this.counter++;
      if (this.counter % 5 === 0) {
        this.callback(this.counter);
      }
    }
}

const coolCounter = new Counter(printSomething); // 처음에 set해주면 increase를 호출 할 때 함수를 넘겨줄 필요가 없다
coolCounter.increase(); // counter가 1이 증가 된다, 1
coolCounter.increase(); // counter가 1이 증가 된다, 2
coolCounter.increase(); // counter가 1이 증가 된다, 3
coolCounter.increase(); // counter가 1이 증가 된다, 4
coolCounter.increase(); // counter가 1이 증가 된다, 5, console 출력

const coolCounter = new Counter(alertNum); // 처음에 set해주면 increase를 호출 할 때 함수를 넘겨줄 필요가 없다
coolCounter.increase(); // counter가 1이 증가 된다, 1
coolCounter.increase(); // counter가 1이 증가 된다, 2
coolCounter.increase(); // counter가 1이 증가 된다, 3
coolCounter.increase(); // counter가 1이 증가 된다, 4
coolCounter.increase(); // counter가 1이 증가 된다, 5, alert 출력

const coolCounter = new Counter(); // undefined로 type에러가 남
coolCounter.increase(); // type ERROR
coolCounter.increase(); // type ERROR
coolCounter.increase(); // type ERROR
coolCounter.increase(); // type ERROR
coolCounter.increase(); // type ERROR

========================================
만약에 선언할 때 값을 넘겨주지 않게 되면???
========================================

class Counter {
    constructor(runEveryFiveTimes) {
      this.counter = 0;
      this.callback = runEveryFiveTimes;
    }
  
    // class 내부에서는 함수 선언시 function을 안붙여줘도 된다
  
    increase() {
      this.counter++;
      if (this.counter % 5 === 0) {
        this.callback && this.callback(this.counter);
      }
    }
}

const coolCounter = new Counter();
coolCounter.increase();
coolCounte.increase();
coolCounte.increase();
coolCounte.increase();
coolCounter.increase();