콜백 함수(Callback Function)은 다른 함수의 인수로 전달되어 특정 작업이 완료된 후 호출되는 함수이다.
매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.
function greet(name, callback) {
console.log(`안녕하세요, ${name}님!`);
callback(); // 전달받은 함수 호출
}
function farewell() {
console.log("잘 가세요!");
}
greet("홍길동", farewell);
// 출력:
// 안녕하세요, 홍길동님!
// 잘 가세요!
greet() 함수를 호출할 때 입력 매개변수로 name과 farewell() 함수를 전달했다.
greet() 가 실행되면 실행문 안에서 두 번째 매개변수인 callback을 괄호 ()를 붙여 호출한다.
콜백 함수는 보통 함수의 이름이 없는 익명 함수 형태로 넘겨준다.
간결하고 동작을 바로 정의할 수 있으며, 콜백 함수가 한 번만 사용될 때, 익명 함수를 사용하면 불필요한 함수 정의를 피할 수 있기 때문이다.
function greet(name, callback) {
console.log(`안녕하세요, ${name}님!`);
callback(); // 전달받은 함수 호출
}
greet("홍길동", function () {
console.log("잘 가세요!");
});
// 출력:
// 안녕하세요, 홍길동님!
// 잘 가세요!
콜백 함수를 익명 함수로 정의하면 코드의 간결성을 얻을 수 있지만, 한차례 더 간결하게 표시하기 위해 자바스크립트의 화살표 함수를 이용할 수도 있다.
function greet(name, callback) {
console.log(`안녕하세요, ${name}님!`);
callback(); // 전달받은 함수 호출
}
greet("홍길동", () => {
console.log("잘 가세요!");
});
// 출력:
// 안녕하세요, 홍길동님!
// 잘 가세요!
콜백 지옥이란 함수의 매개변수로 념겨지는 콜백 함수가 반복되어 코드가 복잡하고 가독성이 떨어지며 관리하기 어려운 상황을 뜻한다.
특히 비동기 작업을 처리하기 위해 콜백 함수를 사용하다 보면, 여러 비동기 작업이 순차적으로 실행되도록 하기 위해 콜백 함수를 중첩하게 되는데, 이 과정에서 코드가 가독성이 떨어지고, 유지보수가 어려워질 수 있다.
