4-1 콜백 함수란

<aside> 💡 단순하게 보면 콜백 함수란 다른 함수의 인자로 넘겨진 함수이다. 사용하는 관점에서 보면 콜백은 비동기 작업의 결과를 가지고 런타임에 호출되는 함수를 이야기한다.

</aside>

콜백 함수를 이해하기 위해서는 제어권이라는 개념이 중요하다. 간단하게 이야기하면 콜백 함수는 자기가 인자로 넘겨진 함수에게 제어권을 같이 위임한다. 콜백 함수의 제어권을 위임한 함수는 비동기적인 내부 로직을 처리한 후 콜백 함수를 실행함으로써 작업이 끝났음을 알린다.

4-2 제어권

제어권에 대해 더 구체적으로 알아보자.

4-2-1 호출 시점

콜백 함수의 제어권을 넘겨받은 함수는 콜백 함수의 호출 시점에 대한 제어권을 갖는다.

var count = 0
var cbFunc = function () {
  console.log(count)
  if (++count > 4) {
    clearInterval(timer)
  }
}
var timer = setInterval(cbFunc, 300)

다음과 같이 setInterval 함수를 사용하는 예제를 보자. 첫 번째 인자로 실행시킬 콜백 함수를, 두 번째 인자로 해당 콜백 함수를 실행할 시간 간격(delay)을 받는다. 이제 300ms마다 콜백 함수를 실행시키다 count의 값이 4를 초과하면 clearInterval()을 통해 setInterval 실행을 정지한다.

code 호출 주체 제어권
cbFunc() 사용자 사용자
setInterval(cbFunc, 300) setInterval setInterval

만약 cbFunc()을 그냥 함수로서 호출했다면 호출 주체와 제어권은 모두 사용자에게 있다. 그러나 setInterval() 함수의 콜백 함수로서 인자로 넘겨진다면, cbFunc()의 제어권은 setInterval()에 양도된다. 따라서 setInterval()이 설정한 시간 간격마다 콜백 함수인 cbFunc()이 setInterval()에 의해 호출되는 것이다.

4-2-2 인자

콜백 함수의 제어권을 넘겨받은 함수는 콜백 함수의 호출 시점뿐만 아니라 인자의 값과 그 순서에 대한 제어권 역시 가진다.

var newArr = [10, 20, 30].map(function (currentValue, index) {
  console.log(currentValue, index)
  return currentValue + 5
})

console.log(newArr)

/*
10 0
20 1
30 2
[ 15, 25, 35 ]
*/

이 때 Array.prototype.map의 구조는 다음과 같다.

Array.prototype.map(callback[, thisArg])
callback: function(currentValue, index, array)