[JavaScript 기본] 콜백 함수

자바스크립트에서는 함수도 하나의 값으로 취급할 수 있음

즉, 함수를 인수로 전달하거나 반환값으로 사용할 수 있음 -> 이런 특성 덕분에 콜백 함수가 가능함!

---

1. 콜백 함수란?

• 콜백함수는 "다른 함수의 인자로 전달되어, 그 함수 내부에서 나중에 실행되는 함수"를 말함

function main(value) {
  console.log(1);
  console.log(2);
  value(); // 인수로 받은 함수 실행
  console.log("end");
}

function sub() {
  console.log("this is sub");
}

main(sub);

• 실행 순서

1  
2  
this is sub  
end

• 여기서 `sub`는 `main`의 인수로 전달되어, `main` 내부에서 실행되므로 콜백 함수라고 부름

---

2. 콜백 함수의 필요성

• 비슷한 동작을 여러 함수로 반복할 때, 콜백으로 중복 제거 가능

// 중복된 코드
function repeat(count) {
  for (let i = 1; i <= count; i++) {
    console.log(i);
  }
}

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

repeat(5);
repeatDouble(5);

-> 두 함수는 거의 동일하고, 출력 로직만 다름

---

위 코드를 콜백 함수로 개선하면?

function repeat(count, callback) {
  for (let i = 1; i <= count; i++) {
    callback(i); // 전달받은 콜백 실행
  }
}

// 숫자 출력
repeat(5, function (i) {
  console.log(i);
});

// 2배 출력
repeat(5, function (i) {
  console.log(i * 2);
});

• 이렇게 하면 반복 로직은 `repeat` 함수 하나에 집중되고, 세부 동작은 콜백 함수로 분리되어 유연해짐!

---

또 콜백 함수를 화살표 함수로 간결하게 표현하면?

repeat(5, (i) => {
  console.log(i)
)};     // 1,2,3,4,5

repeat(5, (i) => {
  console.log(i * 2)
)};		// 2,4,6,8,10