[js] 콜백 함수, 콜백 지옥

 

콜백 함수는 다른 함수에 매개변수로 전달되어 그 함수의 실행이 끝난 후 호출되는 함수이다

주로 비동기 작업을 처리하거나, 특정 이벤트가 발생했을 때 주로 사용된다

 

function func(callback) {
	callback();
}
function callback() {
	console.log("hello");
}

func(callback); //hello

 

 

콜백함수는

1. 재사용성
2. 비동기 처리

에서 장점이 나타난다

 

 

재사용성 예시

function repeat(count) {
    for (let idx = 0; idx < count; idx++) {
        console.log(idx)
    }
}

function repeatDouble(count) {
    for (let idx = 0; idx < count; idx++) {
        console.log(idx * 2)
    }
}
 
repeat(3) //0,1,2
repeatDouble(3) //0,2,4

 

이렇게 유사한 함수를 아래와 같이 콜백함수를 이용하여 재사용성있게 사용할 수 있다

function repeat(count, callback) {
    for (let idx = 0; idx < count; idx++) {
        callback(idx)
    }

}

repeat(3, idx => console.log(idx)) //0,1,2
repeat(3, idx => console.log(idx * 2)) //0,2,4

 

 

 

비동기 작업 예시

console.log('Start');

setTimeout(function() {
  console.log('hello');
}, 2000);

console.log('End');

 

이렇게 비동기 작업이 완료된 후에 콜백을 사용할 수도 있다

 

하지만 이를 너무 남발하면 코드가 복잡해지고 가독성이 떨어지는 콜백지옥 에 빠지게 되는데, 이는 Promise, async/await으로 해결 가능하다