JavaScript - callback 함수

call / back으로 나눌 수 있다.

어떤게 이 함수를 호출해서 돌려줘서 넘겨줄 것이다.

무언가가 어떤 방식이든 언제든 함수를 호출해서 넘겨줄 거임.

제어권을 넘겨준다고 생각하면 된다. 콜백함수를 어떻게 처리할 지는 제워권을 가진 애가 감당한다.

setInterval(function(){console.log('1초마다 실행될거임')}, 1000);

인자로 1. 콜백함수 2. 주기를 갖는다.

콜백 함수를 변수로 치환하면 다음과 같다.

var cb = function(){
  console.log('1초마다 실행될 것이다.');
};

setInterval(cb, 1000); //정의 : setInterval(callback, interval) 

callback 함수는 setInterval에 제어권을 넘기게 되는 것이다.

var arr = [1,2,3,4,5];
var entries = [];
arr.forEach(function(v,i){
  entries.push([i, v, this[i]]);
}, [10,20,30,40,50]);

결과는 [ [0, 1, 10], [1, 2, 20], [2,3,30], [3,4,40], [4,5,50] ]으로 나오게 된다.

arr.forEach => 메소드다.

인자로는 콜백함수, this로 인식할 대상(생략 가능) 을 넘겨준다.

arr.forEach(callback[, thisArg]). 뒤의 대괄호 안에는 ㅅㅇ략이 가능하다는 뜻이다.

callback에는 또 currentValue, index, array인자가 순서대로 올 수 있다.

Array.prototype.forEach = function(callback, thisArg){
  var self = thisArg || this; //thisArg의 값이 있을 때는 thisArg를 담고 아니면 this.
  for(var i =0; i< this.length; i++){
    callback.call(self, this[i], i, this);
  }
}

callback 함수는 forEach의 규칙을 꼭 따라야 함.

document.body.innerHTML = '<div id="a">abc</div>';
function cbFunc(x){
  console.log(this, x);
}

document.getElementById('a').addEventListener('click', cbFunc);

$('#a').on('click', cbFunc); //Jquery

this에는 <div id="a">abc</div>, x는 mouseevent가 담겨있다.

addEventListener는 type, callback, option의 인자가 들어가는데

callback 함수에는 this는 eventtarget, x에는 event 객체가 들어가게끔 되어 있을 것이다.

콜백함수의 특징은 다음과 같다.

다른 함수 A의 매개변수로 콜백함수 B를 전달하면, A가 B의 제어권을 갖게 된다.
특별한 요청(bind)가 없는 한 A에 미리 정해진 방식에 따라 B를 호출한다.
미리 정해진 방식이란 this에 무엇을 바인딩할지, 매개변수에는 어떤 값들을 지정할지, 어떤 타이밍에 콜백을 호출할지 등이다.

주의할점은 콜백은 ‘함수’이다.

var arr = [1,2,3,4,5];
var obj = {
  vals: [1,2,3],
  logValues: function(v,i){
    if(this.vals){
      console.log(this.vals, v, i);
    }else{
      console.log(this,v,i);
    }
  }
};

obj.logValues(1,2); //메소드로 호출이다. this가 obj가 될 것이다. this.vals => true가 된다.

arr.forEach(obj.logValues); //콜백함수로 전달. this가 바인딩 되지 않는다. => window가 출력된다.

Share this post