Callback Function (콜백 함수)

 

🟡 Callback Function

다른 함수의 인자로 전달되어, 특정 작업이 끝난 후 실행되는 함수를 의미한다.

즉, 함수를 실행하는 것이 아니라 필요한 시점에 실행할 수 있도록 다른 함수에 전달하는 함수이다.

 

◼️ 주요 특징

• 비동기 작업 처리 (API 요청, 파일 읽기 등)
• 이벤트 처리
• 배열 메서드 (map, filter, forEach)
• 타이머 (setTimeout, setInterval)

 

◼️ 필요 이유

비동기 작업은 완료될 때까지 시간이 걸릴 수 있다.

콜백 함수를 사용하면 작업이 완료된 이후 실행할 코드를 미리 전달할 수 있어 순서를 보장할 수 있다.

function A(callback) {
  setTimeout(() => {
    console.log("작업 완료");

    callback();
  }, 1000);
}

function B() {
  console.log("콜백 함수 실행");
}

A(B);

• setTimeout의 작업이 끝난 뒤 callback()이 실행된다.

 

◼️ 기본 문법

function main(callback) {
  // 작업 수행

  callback();
}

function print() {
  console.log("콜백 함수 실행");
}

main(print);

• print 함수를 main의 인자로 전달하고, 작업이 끝난 뒤 callback()으로 실행한다.

 

 

📍 POINT 📍

✔️ 콜백 함수는 함수 자체를 인자로 전달한다. ✔️

✔️ 함수를 즉시 실행하는 것이 아니라 필요한 시점에 호출한다. ✔️

✔️ JavaScript의 많은 내장 함수(map, filter, forEach, setTimeout)도 콜백 함수를 사용한다. ✔️

✔️ 최근에는 비동기 처리를 위해 Promise와 async/await를 더 많이 사용하지만,

콜백 함수는 여전히 JavaScript의 기본 개념으로 매우 중요하다. ✔️

 

 

📋 대표적인 콜백 함수 사용 예 📋

함수	콜백 실행 시점
setTimeout()	지정한 시간이 지난 후
setInterval()	지정한 시간마다
forEach()	배열의 각 요소마다
map()	배열의 각 요소를 변환할 때
filter()	배열의 각 요소를 검사할 때
addEventListener()	이벤트가 발생했을 때