callback

callback

javascript에서는 callback 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다.
callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말한다.

function async(callback) {
  setTimeout(() => {
    callback("1초 후 실행");
  }, 1000);
}

async(function (msg) {
  console.log(msg);
});

함수의 매개변수로 callback을 받고 함수를 실행할 때 인자로 함수를 넣어준다. 그래서 위 예제를 보면 async를 실행했을 때 setTime함수를 사용하여 callback 함수를 실행해준다.
그러면 1초가 흐른 뒤 콘솔 창에 '1초 후 실행'이 나온다.
하지만 이런 callback함수는 필요한 경우가 아니면 잘 쓰지 않는다.

function increase(number, callback) {
  setTimeout(() => {
    const result = number + 10;
    if(callback) {
      callback(result);
    }
  },1000)
}

console.log('시작!')
increase(0, first => {
  console.log(first);
  increase(first, second => {
    console.log(second);
    increase(second, third => {
      console.log(third);
      increase(third,  fourth => {
        console.log(fourth);
        console.log('끝!');
      })
    })
  })
})

위 예제의 값으로 10,20,30,40,"끝" 이렇게 나온다.이러한 코드는 가독성도 떨어지고 로직을 변경하기도 어렵다. 이와 같은 구조를 콜백지옥(Callback Hell) 이라고 한다. 웬만하면 지양해야하는 코드이다.