콜백 함수

콜백 함수란

콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 됩니다. 콜백 함수의 핵심은 제어권의 위임에 있습니다. 예를 들어 보겠습니다.

 

A와 B가 각각 아침 8시에 만나기로 하고 잠을 잡니다. 아침에 적어도 6시에 일어나야 하는 상황이라고 가정해보겠습니다. A는 불안한 마음에 수시로 시계를 확인합니다. 계속 잠을 설치다가 결국 5시 즈음 포기하고 일어나고 말죠. 반면 B는 알람시계의 알람을 세팅합니다. 알람시계는 6시가 되는 순간 울리게 될 것이므로 B는 안심하고 잠자는 일을 마저 진행합니다. 6시가 되자 알람이 울리고 B는 상쾌하게 일어납니다.

 

A는 수시로 시간을 구하는 함수를 직접 호출했습니다. 반면 B는 알람을 설정하는 함술을 호출했고, 이 함수는 호출 당시에는 아무것도 하지 않다가 B가 정해준 시간이 되었을때 '알람이 울리는 결과'를 반환했습니다. 시계에 입장에서 보면 A는 요청을 할 때 마다 시간 정보를 제공하였고 B는 요청을 받은 뒤 자체적으로 수행하고 판단하여 적절한 시점에 통보했습니다. A의 경우 시계 함수의 제어권은 A에 있었고, 시계는 요청을 이행할 뿐이었죠. 반면 B의 경우 요청을 하면서 알람을 울리는 명령에 대한 제어권을 시계에 넘겨주었습니다. 이처럼 콜백함수는 제어권과 관련이 깊습니다.

제어권

다음 코드를 살펴봅시다.

let count = 0;
let cbFunc = () => {
    console.log(count);
    if(++count > 4) clearInterval(timer);
};
let timer = setInterval(cbFunc, 300);

이 코드를 실행하면 콘솔창에 0.3초에 한 번씩 숫자가 0부터 1씩 증가하며 출력되다가 4가 출력된 이후 종료됩니다. setInterval이라는 '다른 코드'에 첫 번째 인자로 cbFunc를 넘겨주자 제어권을 넘겨받은 setInterval이 스스로의 판단에 따라 적절한 시점에(0.3초 후) 이 익명 함수를 실행했습니다. 이렇게 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가집니다.

code	호출 주체	제어권
cbFunc();	사용자	사용자
setInterval(cbFunc, 300);	setInverval	setInterval

그러나 콜백 함수를 무분별하게 사용하면 저번에 살펴본 것 처럼 콜백 지옥에 빠지게 됩니다.

이러한 콜백 지옥을 해결하기 위해 자바스크립트에서 promise, async, await 등 다양한 기술이 등장했습니다.

다음엔 promise와 async, await에 대한 내용을 하나하나 확인해보겠습니다.