JS | What the heck is a Callback?

Callback은 다른 function이 실행된 뒤에 실행되는 function이다.

자바스크립에서 function은 객체이다. 이점 때문에 function은 다른 function들을 arguments로 가질 수 있다. 그리고 다른 function을 return할 수 있다.

다른 function들을 return하는 function을 higher-order functions라고 하고, argument가 되는 function들을 callback function이라 한다.

Callback 함수가 왜 필요한가?

Javascript는 event driven 언어이다. 이것은 다음 단계로 실행되기 전에 response를 기다리는 대신에 다른 event들을 listening하는 동안 계속해서 실행되는 것을 의미한다.

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

위 예시에서 first 함수는 가장 먼저 실행된다. 그리고 second 함수가 두번째로 실행된다.

// 1
// 2

만약 first 함수 내부에 즉시 실행되지 않는 코드들이 포함되어 있다면 어떻게 될까?

예를 들어 request를 보내고 response를 기다려야하는 API request가 있다면?

어느 정도의 시간이 지난 후에 function을 call하는 Javascript의 setTimeout 함수를 사용하여 이런 동작들을 simulate 해보고자 한다.

500miliseconds동안 function을 지연시켜 API request를 simulate하였다.

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

위 코드를 실행하면

first();
second();
// 2
// 1

다음과 같이 출력된다.

first함수를 먼저 호출했지만, 결과값은 second 함수가 먼저 return되었다.

이것은 자바스크립트에서 second함수를 실행하기 전 first 함수의 reponse를 기다리지 않고 넘어가기 때문이다.

Callback은 특정 코드들을 다른 코드들의 실행이 끝나기 전에 실행되지 않도록 하기 위한 방법 중 하나이다.

Callback 만들어보기(실습)

먼저, 크롭 개발자 콘솔을 열고, 아래 function 선언문을 console에 입력한다.

function doHomework(subject) {
alert(Starting my ${subject} homework.);
}
위에서 우리는 doHomework function을 만들었다. 이 함수는 하나의 variable을 가지고 있다.

콘솔에 아래와 같이 입력하여 위에서 선언한 function을 호출해보자.

doHomework('math');
// Alerts: Starting my math homework.

그럼 이제 doHomework() 함수의 마지막 parameter로 callback을 추가한다. callback 함수는 호출될 doHomework() 함수의 두번째 argument로 정의되었다.

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

doHomework('math', function() {
alert('Finished my homework');
});

이렇게 코드를 입력하고 실행을 하면 콘솔에서 보게될 alert 메시지는 Your ‘starting homework’ alert, followed by your ‘finished homework’ alert. 이다.

그러나 callback 함수는 항상 함수 내부에서 정의되는 것은 아니다. callback함수는 코드 밖에서도 얼마든지 정의될 수 있다.

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

위 코드는 이전에 실행했던 코드와 완전히 똑같은 result 값을 가지지만 설정하는 방법은 다소 다르다. 여기서 확인할 수 있듯이 doHomework() 함수가 호출될때까지 alertFinished 함수는 실행되지 않는다.

출처 : codeburst.io, Brandon Morelli
본 포스팅은 위 링크의 Brandon Morelli의 Article을 개인적으로 해석한 내용이며 잘못된 부분이 있을 수 있습니다.