callback

callback 함수란?

호출해서 돌려줄 함수

내가 넘기고자 하는 대상한테 제어권을 넘긴다

 

setInterval(function () {
  console.log('1초마다 실행됩니다');
},1000);

주기함수인 setInterval을 호출해서 주기적으로 실행하라는 것.

 

var cb = function() {
  console.log('1초마다 실행됩니다');
}
setInterval(cb,1000);

setInterval( callback, millaseconds );

첫번째 인자로는 콜백함수, 두번째  인자로는 ms를 받아서 ms마다 callback을 실행

내가 setInterval한테 콜백함수를 넘겨주면 얘가 알아서 실행한다

 

var arr =[1,2,3,4,5];
var entries = [];

arr.forEach(
  // forEach를 호출하고
  function(v,i){
    entries.push([i,v,this[i]]);
}// (첫번째 인자로는 콜백함수)
,[10,20,30,40,50]);
// 두번째 인자로 this로 인식할 대상(this argument를 넣었다)
console.log(entries);

forEach는 arr에 있는 각각의 것들을 순서대로 꺼내서 첫번째 인자의 값으로,

두번째 인자의 인덱스로 부여하면서 이 함수를 실행한다

(forEach)메소드의 두번째 인자로 this argument를 넣을 수 있다

console.log(entries)의 결과

 

forEach는?

:배열마다 한번씩 제공한 함수를 실행한다

 

callback	currentValue	배열에서 현재 처리중인 요소의 값
	index	배열에서 현재 처리중인 요소의 인덱스
	array	forEach()가 적용되고 있는 배열
thisArg	선택사항. callback을 실행할 때 this로써 사용하는 값

forEach의 매개변수로는 callback과 thisArg를 넣을 수 있다.

callback에서 인수로 취할 수 있는 것들은 currentValue, index, array

 

 

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

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

$('#a').console('click',cbFunc);

EventListener는 callback 함수를 받을 때,

event 타겟이 되는 것들을 this로 하고

그다음에 첫번째 인자로는 그 이벤트 자체를 넘겨준다

 

콜백함수의 특징

1. 다른 함수 A의 인자로 콜백함수 B를 전달하면, A가 B의 제어권을 갖게 된다

(전달받은 A가 콜백함수 B의 제어권을 갖는다)

 

그럼 제어권을 가지고있는 A는 특별한 요청(bind)이 없는 한,

A에 미리 정해놓은 방식(규정되어있는 방식)에 따라 B를 호출한다(처리한다)

 

*여기서 말하는 미리 정해놓은 방식이란?

어떤 시점에 콜백을 호출할지, 인자에는 어떤 값을 지정할지, this에 무엇을 바인딩할지 등이다.

 

주의) 콜백은 메소드가 아닌 함수다

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

arr.forEach(obj.logValues);

각각의 결과는?

obj.logValues(1,2);

는 메소드로 호출했으니 여기서의 this는 obj

{__vals:Array(3),logValues:f} 1 2

1,2,3이 출력되고 여기서 넘겨준 1,2를 출력

 

arr.forEach(obj.logValues);

메소드로 호출한게 아니라 콜백함수로 전달한 것

여기서의 this는 obj가 아닌 window를 가리킨다