Callback Fucntion 이란?

의미를 파악해 보자. 

 

????

 

call me back~

 

뭔가 전화를 다시 걸라는 건가...? (내 번호 안알랴줌)

 

그 느낌 그대로 callback을 다시 본다면 단어 뜻 자체가 회신하다/답신하다 라는 뜻을 지닌다. 

 

그러면 callback function 은 회신하는 함수가 된다. 

 

함수를 하나 처리하고 나서 회신을 준다는 것이다!

 

이말은 즉 콜백함수에 대한 제어권을 내가 넘기고자 하는 대상한테 위임하는 것이다. 

 

이 콜백을 어떻게 처리할지는 제어권을 넘겨받은 대상이 전적으로 관여를 한다. 

 

넘겨줄 제어권에는 다음과 같은 항목이 있다. 

 

1. 실행 시점
2. 매개 변수
3. this

1. 실행 시점

 

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

 

setTimeout과 마찬가지로 setInterval도 실행 시점에 대한 제어권을 넘겨주는 것이다. 

 

위 코드를 밑에처럼 변경하겟다. 

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

setInterval(cb, 1000);

똑같은 내용이다. 뭐 

 

결론적으로 setInterval에게 제어권을 넘긴 것이다. => 실행 시점을 넘겨서 알아서 실행하도록 함!

 

 

2. 매개변수

 

실행 시점 뿐만 아니라 매개변수도 넘겨줄 수 있다. 

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

var entries = [];

arr.forEach(function(v, y){
	entries.push([i, v, this[i]]);
}, [10, 20, 30, 40, 50]);
console.log(entries);

//결과 
//[ [0,1,10], [1,2,20], [2,3,30], [3,4,40], [4,5,50] ]

 

위 코드는 배열에 있는 요소들을 순서대로 하나씩 꺼내서 첫번째 매개변수에 값, 두번째 매개변수에 index를 부여하면서 이 함수를 실행한다. 

 

forEach는 첫번째 인자는 callback함수를 받고 두번째는 thisArgs를 받는다. 

 

3. this

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

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

 

 

콜백 함수의 특징을 정리해보자.

 

1. 다음 함수(A)의 인자로 콜백함수(B)를 전달하면 A가 B의 제어권을 갖게 된다. 
2. 특별한 요청(bind)이 없는 한 A에 미리 정해놓은 방식에 따라 B를 호출한다. 
3. 여기서 미리 정해놓은 방식이란 어떤 시점에 콜백을 호출할 지, 인자에는 어떤 값들을 지정할 지, this에 무엇을 바인딩할지 등이다. 

call me baby~

 

마지막으로 하나만 더 보고 가자 

 

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다
arr.forEach(obj.logValues); 
// 콜백함수로 넘김 - obj를 넘길줄 알았으나
//여기서는 호출을 하지 않았으니 모름. 호출은
//forEach가 할것이고 forEach가 어떤 식으로 호출하냐에 따라 
//this가 달라짐 
//obj.logValues가 가지고 있는 함수만 forEach안에 전달한 것!
//함수로 불럿다? -> this는 전역객체

//this를 obj로 하고 싶으면
arr.forEach(obj.logValues, obj);
arr.forEach(obj.logValues.bind(obj));