js 콜백함수

콜백함수(Callback Function)

다른 함수의 인자로 전달되어 특정 시점에 실행되는 함수
비동기 처리, 이벤트 핸들링, 배열 메서드(map, forEach) 등에서 많이 사용됨

✅기본구조

function mainFunction(callback) {
    console.log("메인 함수 실행");
    callback(); // 전달받은 함수 실행
}

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

mainFunction(myCallback);

// 실행 결과
// 메인 함수 실행
// 콜백 함수 실행

myCallback이 mainFunction의 인자로 전달되어 mainFunction 내부에서 실행됨

✅ 익명 함수(Anonymous Function) 콜백

function greet(name, callback) {
    console.log(`안녕하세요, ${name}님!`);
    callback();
}

greet("철수", function() {
    console.log("반가워요!");
});

// 실행 결과
// 안녕하세요, 철수님!
// 반가워요!

콜백 함수를 직접 전달할 수도 있음

✅비동기 작업에서의 콜백 (setTimeout)

console.log("시작");

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

console.log("끝");

// 실행 결과
// 시작
// 끝
// (3초 후) 3초 후 실행 !

setTimeout이 비동기적으로 실행되므로 3초 동안 기다리지 않고 다음 코드가 실행됨

✅활용(이벤트 핸들링)

document.getElementById("btn").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

addEventLister의 두 번째 인자로 전달된 함수가 콜백 함수로서 동작