콜백함수

콜백 함수(callback function)란, 다른 함수의 인수로 전달되어 실행되는 함수입니다. 즉, 함수 A에서 함수 B를 호출할 때, 함수 B를 인수로 전달하여 함수 A가 실행 중에 함수 B를 호출하는 것입니다. 이 때, 함수 B를 콜백 함수라고 합니다.

콜백 함수는 비동기적인 프로그래밍에서 매우 유용하게 사용됩니다. 예를 들어, AJAX 요청을 보내고 그 결과를 처리하는 경우, 요청이 완료될 때까지 코드의 실행이 중지되어야합니다. 이때 콜백 함수를 사용하면 AJAX 요청이 완료되면 콜백 함수가 호출되어 결과를 처리할 수 있습니다.

또한, 이벤트 핸들러를 등록할 때도 콜백 함수를 사용합니다. 예를 들어, 버튼 클릭 이벤트에 대한 핸들러를 등록할 때, 클릭 이벤트가 발생하면 콜백 함수가 호출되어 버튼이 클릭되었다는 사실을 처리할 수 있습니다.

아래는 콜백 함수가 사용된 jQuery 예시 코드입니다.

// 함수 A에서 콜백 함수를 인수로 받아서 사용하는 경우
function calculate(a, b, callback) {
  var result = a + b;
  callback(result);
}

// 함수 B는 콜백 함수로 사용됩니다.
function printResult(result) {
  console.log(result);
}

calculate(10, 20, printResult); // 30 출력

// 이벤트 핸들러에서 콜백 함수를 사용하는 경우
$("#myButton").on("click", function() {
  alert("Button clicked!");
});

// 함수 A에서 콜백 함수를 인수로 받아서 사용하는 경우
function calculate(a, b, callback) {
  var result = a + b;
  callback(result);
}

// 함수 B는 콜백 함수로 사용됩니다.
function printResult(result) {
  console.log(result);
}

calculate(10, 20, printResult); // 30 출력

// 이벤트 핸들러에서 콜백 함수를 사용하는 경우
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

위 코드에서 calculate() 함수는 a와 b를 더한 결과를 계산하고, callback() 함수에 결과를 전달합니다. printResult() 함수는 callback() 함수로 사용되어 결과를 콘솔에 출력합니다. 마지막으로 calculate() 함수를 호출할 때, printResult() 함수를 인수로 전달하여 결과를 출력합니다.

이벤트 핸들러에서는 addEventListener() 함수의 두 번째 인수, jQuery의 on() 함수로 콜백 함수를 등록합니다. 버튼이 클릭될 때, 등록된 콜백 함수가 호출되어 알림창이 뜹니다.