2026-02-24

콜백 함수(Callback Function)

콜백 함수란

다른 함수의 인자로 전달되어, 특정 시점에 실행되는 함수

매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것

기본 예시

function greet(name, callback) {
  console.log("안녕하세요 " + name);
  callback();
}

function afterGreeting() {
  console.log("인사 완료");
}

greet("JS", afterGreeting);

→ afterGreeting이 콜백 함수

왜 콜백을 사용하는가?

1. 실행 시점을 제어하기 위해

• 어떤 작업이 끝난 뒤 실행
• 조건이 충족되면 실행

2. 비동기 처리

• 네트워크 요청
• 파일 읽기
• 타이머

비동기 콜백 예시

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

• setTimeout이 Web API에 등록
• 3초 후 콜백 함수 실행

콜백함수의 활용

• 고차함수

  자바스크립트의 고차 함수에서 콜백함수 사용

    [1, 2, 3].map((num) => num * 2);
  

  • 여기서 (num) => num * 2가 콜백
  • 배열 메서드(map, filter, reduce)는 전부 콜백 기반

• 이벤트 리스너

    let button = document.getElementById("button"); // 버튼 요소를 선택
      
    // 버튼에 클릭 이벤트 리스너를 추가
    button.addEventListener("click", function () { // 콜백 함수
      console.log("Button clicked!"); 
    });
  

  • addEventListener는 특정 이벤트가 발생했을 때 콜백 함수를 실행하는 메서드
  • 클릭과 같은 이벤트를 처리하기 위해 등록하는 이벤트 리스너로 콜백함수가 쓰인다.
  • 버튼을 클릭하면 그에 연관되는 스크립트 실행을 콜백 함수로 등록하는 형태

• Ajax 결과값 받을 때

    // fetch 메서드를 사용하여 서버로부터 JSON 데이터를 받아오고 콜백 함수로 화면에 출력
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(function (response) {
        // fetch 메서드가 성공하면 콜백 함수로 response 인자를 받음
        return response.json(); // response 객체의 json 메서드를 호출하여 JSON 데이터를 반환
      })
      .then(function (data) {
        // json 메서드가 성공하면 콜백 함수로 data 인자를 받음
    	console.log(data);
      })
  

  • 서버와 데이터를 주고받을 때 사용하는 fetch 메서드의 서버 요청의 결과값을 처리하기 위해 콜백 함수가 사용
• 타이머 실행 함수
• 애니메이션

문제점 → 콜백 지옥

login(user, function (res) {
  getProfile(res.id, function (profile) {
    updateProfile(profile, function () {
      console.log("완료");
    });
  });
});

• 코드가 계속 중첩됨
• 가독성 저하
• 에러 처리 복잡

⇒ 콜백 지옥

콜백의 대안

• Promise (ES6)

    login(user)
      .then(res => getProfile(res.id))
      .then(profile => updateProfile(profile))
      .catch(err => console.error(err));
  

• async / await (ES2017)

    async function process() {
      try {
        const res = await login(user);
        const profile = await getProfile(res.id);
        await updateProfile(profile);
      } catch (err) {
        console.error(err);
      }
    }
  

  • Promise 기반 위에서 동작
  • 비동기식 코드를 동기식으로 표현하여 간단하게 나타내는 것

이벤트 루프와의 연결

콜백 함수는

• Web API에서 처리 후
• Task Queue 또는 Microtask Queue에 등록
• 이벤트 루프에 의해 실행됨

⇒ 콜백은 이벤트 루프와 직접 연결

동기 콜백 vs 비동기 콜백

참고자료

• https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98
• https://velog.io/@ko1586/Callback%ED%95%A8%EC%88%98%EB%9E%80-%EB%AD%94%EB%8D%B0
• https://velog.io/@ahsy92/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%98%B8%EC%B6%9C-callback-promise-asyncawait%EC%9D%98-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90