[JS] 콜백 함수

콜백함수

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수(다시, 전화)

예시

    //외부에서 전달받은 f를 n만큼 반복 호출
    function repeat(n,f) {
      for (var i = 0; i<n; i++) {
        f(i); // i를 전달하면서 f를 호출
    }

    var logAll = fuction (i) {
      console.log(i);
    };
    // 반복 호출할 함수를 인수로 전달
    repeat(5, logAll); // 0 1 2 3 4

    var logOdds = function (i) {
      if (i%2) console.log(i);
    };

    //반복 호출할 함수를 인수로 전달
    repeat(5, logOdds); //1 3

• 경우에 따라 변경되는 일을 함수 f로 추상화
• 자바스크립트 함수는 일급 객체이므로 함수의 매개변수를 통해 함수를 전달할 수 있음
• repeat 함수는 외부에서 로직의 일부분을 함수로 전달받아 수행하게되면서, 더욱 유연한 구조를 가지게됨
• 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 함.
• 콜백 함수를 다른 곳에서도 호출할 필요가 있거나, 콜백 함수를 전달받는 함수가 자주 호출된다면 함수 외부에 콜백 함수를 정의하는 것이 효율적

활용

• 콜백 함수는 함수형 프로그래밍 패러다임뿐 아니라 비동기 처리(이벤트 처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴

  // 콜백 함수를 사용한 이벤트 처리
  // myButton 버튼을 클릭하면 콜백 함수를 실행
  document.getElementById('myButton').addEventListener('click', function () {
  console.log('버튼이 클릭됨!');
  });
  // 콜백 함수를 사용한 비동기 처리
  // 1초 후에 메시지를 출력
  setTimeout(function () {
  console.log('1초 경과');
  },1000);

참고
이웅모, 모던자바스크립트 딥다이브