자바스크립트 입문_콜백함수(callback function)의 제어권

(본 포스팅은 위키북스의 '코어자바스크립트' 책을 공부하면서 작성되었습니다_내돈내산)

 

• 콜백함수는 디른코드의 인자로 넘어가며 그 함수의 제어권도 함께 넘어가게 됨.
• 콜백함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행함.

(callback function)

 

<호출시점>

-콜백함수 예제: setInterval-

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

• 300ms(밀리초)마다 콜백함수를 실행하도록 하고, count가 4가 넘엇을때 Interval마다 실행하는 작동을 멈추어라.
• 함수의 제어권을 조금 더 잘 설명하기 위해 코드를 조금 변경해보면 다음과 같다.

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

var timer = setInterval(cbFunc,300)

• 위의 코드에서 보았을때 cbFunc가 setInterval 함수의 콜백함수로 작용하며 0.3초마다 작동하게 됨. 
• 코드방식과 제어권을 살펴보면 다음처럼 콜백함수로 들어갔을때는 호출주체와 제어권이 사용자가 아니게 됨.

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

 

<인자>

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]

• map 메서드는 첫번째 인자로 callback 함수를 받고 생략가능한 두번째인자로 this를 받는다(두번째 인자가 지정되지 않으면 자동으로 전역객체가 바인딩 됨.
• 이와같이 자바스크립트의 메소드중 콜백함수를 인자로 취급하는 메소드들이 있다.
• map함수의 경우 currentValus, index, array(map이 적용되는 배열 그 자체) 순으로 인자를 받아들임.
• 이처럼 콜백함수의 제어권을 넘겨받은 코드는 콜백함수를 호출할 때 인자에 어떤값들을 어떤순서로 넘길것인지에 대한 제어권을 가짐.

<this>

• 직접 map 함수를 구현해 this가 어떤식으로 지정되는지 알아보기 위한 코드를 작성.

Array.prototype.map = function (callback, thisArg) {
  var mappedArr = [];
  for(var i = 0; i < this.length; i++){
    var mappedValue = callback(thisArg || window, this[i], i, this);
    mappedArr[i] = mappedValue;
  };
  return mappedArr;
};

• 본 메서드 구현의 핵심은 call과 apply메서드에 있음.
• callback에는 thisArg가 주어지면 그 값을, 아니면 window(전역객체)를 지정하도록 함.
• 위의 코드에서 this는 map 앞에 있는 prototype이 됨. 앞에서 지정한 array의 prototype은 array 자체가 됨.
• 콜백함수의 제어권을 넘겨받았기 때문에, call이나 apply를 사용해 this를 지정하여 작동하게 만들 수 있음.