[자바스크립트] 콜백함수와 콜백지옥

콜백함수(callback function)

• 콜백함수란 함수의 파라미터로 함수를 넘겨주고 이를 내부에서 호출하는 것
• 함수가 다른 함수의 입력값(argument)로 전달되서 다른 함수에 의해서 나중에 호출된다

function greeting() {
  console.log('hello'); 
}
function func(cb) { // 함수 func가 다른 함수 greeting을 파라미터로 받는다
  cb(); // 해당 함수 func 내부에서 호출한다
}
func(greeting);

 

콜백의 두가지 종류

1. 동기적 콜백

동기적인 콜백함수인 () => console.log("sync callback") 는 순차적으로 실행된다

function printImmediately(print){
  print();
}
printImmediately(() => console.log("sync callback")); // 함수가 호출되었을때 바로 실행됨

2. 비동기적 콜백

비동기적인 콜백함수인 () => console.log("sync callback") 는 비순차적으로 실행된다 (코드가 읽히고 2초후에 실행됨)

function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log("async callback"), 2000); // 함수가 호출된후 2초 후에 실행됨

 

비유로 이해하는 콜백 함수 동작 방식

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있습니다.

자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있습니다.

캡틴판교 블로그 '자바스크립트 비동기 처리와 콜백 함수' 참조

 

콜백지옥

비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제를 콜백지옥이라고 한다. 콜백 함수가 계속 중첩되면 코드의 가독성이 떨어지고 유지보수가 힘들다는 단점이 생긴다. 이와 같은 문제점을 해결하기 위해 프러미스가 만들어졌다.

 

---

 

Reference

• 엘리의 드림코딩: 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)
• 생활코딩: JavaScript - callback
• 캡틴판교: 자바스크립트 비동기 처리와 콜백 함수