Javascript : 콜백 함수

일반적인 콜백 함수

function main(value) {
  value();
}

function sub() {
  console.log("i am sub");
}

main(sub); // callback 함수

// 익명 함수 (화살표 함수) 이용시 function sub 간략화

function main(value) {
  value();
}

main(() => {
  console.log("i am sub");
});

왜 콜백이라고 하는지?

프로그래밍에서는 뒷전 혹은 나중에 실행되는 뜻으로 사용
당장 실행되는게 아닌 main 함수에 인수로 전달이 되어서 나중에 main 함수가 알아서 실행하게 된다. 라는 뜻

콜백 함수 활용

function repeat(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx);
  }
}

function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

function repeatTriple(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 3);
  }
}

repeat(5);
repeatDouble(5);
repeatTriple(5);

중복 코드가 많아서 매우 안좋은 코드가 된다.
콜백함수를 이용하면 간단하게 수정 가능하다.

function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeat(5, (idx) => {
  console.log(idx);
});

repeat(5, (idx) => {
  console.log(idx * 2); // repeatDouble 함수
});

repeat(5, (idx) => {
  console.log(idx * 3); // repeatTriple 함수
});

계산식을 따로 함수로 표현하는게 아닌 매개변수 callback 으로 사용하면
repeat 함수 안에서 익명함수로 매개변수인 idx를 전달해 각 계산식을 진행할 수 있으며
중복 코드가 사라지게 된다.