Callback

콜백함수

콜백 함수는 함수를 인자로 받는 함수를 말한다. 콜백 함수는 함수를 감싸고 있는 함수가 실행된 이후 실행하고 싶은 함수를 넣는다. 주로 비동기 작업을 처리할 때 사용하는데 이를 콜백 기반(callback-based) 비동기 프로그래밍 이라고 부른다.

콜백 함수 작성하기

콜백 함수는 여러 함수로 응용되어 쓰일 수 있다는 장점이 있다.

function myPlace(country, city, callback){
  const address = `${country} ${city}`
  
  callback(address)
}

function From(live){
	console.log(`저는 ${live}에서 왔습니다.`)
}

function Travel(){
  	console.log(`이 비행기는 ${destination}에 갑니다.`)
}

myPlace("한국", "서울", From) // '저는 한국에서 왔습니다'
myPlace("스페인", "마드리드", Travel) // '이 비행기는 스페인 마드리드에 갑니다.'
  

콜백 지옥

하지만 콜백 함수는 치명적인 단점을 가지고 있다.

const onClickCallback = () => {
    const aaa = new XMLHttpRequest();
    aaa.open("get", "api주소");
    aaa.send(); // 요청
    aaa.addEventListener("load", (res) => {
      const result = // api에서 가져오고 싶은 데이터

      const bbb = new XMLHttpRequest();
      bbb.open("get", "result를 사용할 api" );
      bbb.send();
      bbb.addEventListener("load", (res) => {
        const result2 = // api에서 가져오고 싶은 데이터

        const ccc = new XMLHttpRequest();
        ccc.open("get", "result2f를 사용할 api" );
        ccc.send();
        ccc.addEventListener("load", (res) => {
          console.log(res); // 최종결과값
        });
      });
    });
  };

이런 식으로 오른쪽으로 끊임없이 길어지고 밑으로 끊임없이 파고 들어가게 되는데 이런 형태를 콜백 지옥(callback hell) 또는 멸망의 피라미드(pyramid of doom) 이라고 부른다.