콜백

비동기처리…

Callback 콜백이란?

함수가 끝나고 난 뒤에 실행되는 함수.

자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다.

왜?

자바스크립트는 이벤트 중심의 언어이다. 즉, 자바스크립트는 이벤트의 값이 반환될 때까지 기다리지 않고 다음의 이벤트를 계속 실행한다.

따라서 비동기적인 함수를 실행할 경우, 대표적으로 API 요청 등에서 특별한 처리를 해주지 않으면 함수를 원하는대로 실행하기 어렵다.

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}function second(){
  console.log(2);
}first();
second();//2
//1

콜백이란 이러한 상황처럼 다른 코드가 특정코드가 마무리되기 전에 실행되지 않도록, 즉 비동기처리를 위한 방법이다.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});//‘Starting my math homework'
//'Finished my homework'function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}function alertFinished(){
  alert('Finished my homework');
}doHomework('math', alertFinished);//‘Starting my math homework'
//'Finished my homework'

위의 두 가지 방법 모두 같은 결과를 가진다.

이런 식으로 우리는 콜백을 이용해 특정 로직이 끝났을 때 원하는 함수를 실행시킬 수 있다.

콜백지옥

비동기 처리에 콜백함수를 이용하게 되면 비동기 처리를 중첩시켜서 코드를 작성하기때문에 에러, 예외처리가 어렵고 중첩으로 인한 복잡도가 증가하게 된다.

웹서비스를 개발하는 경우 서버에서 데이터를 받아오고 화면에 표시하기까지 수많은 비동기 처리를 하게되면서 위와같은 콜백지옥 현상이 나타나게된다.

try {setTimeout(() => { throw 'Error!'; }, 1000);} catch (e) {console.log(e);}

setTime() 함수의 콜백은 콜백큐에 있다가 콜스택이 비어지면 실행되기 때문에 위의 예시의 경우 에러를 캐치하지 못한다. 콜백함수의 중첩은 이처럼 에러처리가 힘들다.