19_콜백함수_1

# 오늘 한 일

1. method에 직접 입력하는 경우
   :: 재사용이 불가능에 가깝다. 변경하려면 코드를 직접 수정해야 한다.

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

const coolCounter = new Counter();
coolCounter.counter = 4;
coolCounter.increase(); // 5 wow

2. method의 parameter를 활용하는 경우
   :: 재사용이 가능하지만 리팩토링의 여지가 있다.

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

function printSomething1() {
  console.log('wow');
}

function printSomething2() {
  console.log('awesome');
}

const coolCounter = new Counter();
coolCounter.counter = 4;
coolCounter.increase(printSomething1); // 5 wow
coolCounter.counter = 9;
coolCounter.increase(printSomething2); // 10 awesome

3. 콜백함수를 활용하는 경우
   :: 재사용이 가능하다.

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

function printSomething() {
  console.log('wow');
}

function alertSomething() {
  alert('awesome');
}

const coolCounter = new Counter(printSomething);
coolCounter.counter = 4;
coolCounter.increase(); // 5 wow

const alertCounter = new Counter(alertSomething);
alertCounter.counter = 4;
alertCounter.increase(); // 5 awesome

• 보충설명_1
  :: 1) Counter class의 매개변수는 임의로 runEveryFiveTimes라고 명명.
  :: 2) coolCounter 객체의 인자로 printSomething1을 입력.
  :: 3) 이 때 printSomething1은 콜백함수로써 동작한다.

• 보충설명_2
  {this.callback && this.callback();}
  and연산자를 활용해 콜백함수가 있을 경우에만 콜백함수를 실행하도록 하는 코드

• 보충설명_3
  컴퓨터의 하드웨어를 조립할 때 원하는 기능을 가진 각각의 부품을 결합하여 하나의 본체를 완성하는 것처럼, 코드도 원하는 기능을 가진 각각의 함수, 객체 등을 결합해 하나의 프로그램으로 만드는 것이 이상적이다.

• 보충설명_4
  조금 더 심플하고 직관적인 콜백함수의 예시

function randomQuiz(answer, yes, no) {
  if(answer === 'love you') {
    yes();
  } else {
    no();
  }
}

const printYes = function(){
  console.log('wow');
}

const printNo = function print(){
  console.log('so sad');
}

randomQuiz('love you', printYes, printNo);
// wow

콜백함수를 사용하는 방법
:: yes()처럼 매개변수 옆에 괄호를 입력한다.
(printYes를 인자로 입력했을 때 printYes()가 되면서 함수로 인식한다.)
:: 함수를 호출할 때 정해둔 매개변수만큼 인자를 입력한다.
(매개변수가 3개면 인자도 3개)