자바스크립트 - callback 함수

 (참고자료: 인프런 강의 - 코어 자바스크립트(callback 함수)  

 

callback function: 회신하는 함수 

 

제어권 위임하는 경우: 

1. 실행 시점

2. 매개 변수

3. this 

 

1. 실행 시점 

 

예시 함수)

setInterval(callback, milliseconds)

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

이러면 setInterval이 알아서 callback 함수를 실행시켜줌 -> 제어권을 setInterval에게 위임해주는 것

 

2. 매개변수 (예를들어, forEach)

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]);
console.log(entries);

v는 arr에 있는 각 요소를 하나씩 꺼내서 1,2,3,4,5의 값 출력

i는 인덱스

this[i]는 10,20,30,40,50 이거는 두번째 인자들의 값

 즉, forEach는 인자1(콜백함수), 인자2(this를 인식할 대상)

forEach(매개변수)가 정의된 규칙에 따라야만 함 

 

3. this

 

this에는 currenTarget이 바인딩된다.

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

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

// addEventListener(type, callback, option);

addEventListner에 cbFunc안에 있는 this는 id가 a인 div element로 자동으로 지정. -> event 객체로 자동 지정되는 함수

그렇다면 this를 obj로 바꿀 수 없을까?

 그렇다면, bind 함수를 쓰자 !

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

 

---

콜백함수의 특징: 

1. 다른 함수의 인자로 콜백함수가 들어온다면, 다른 함수가 콜백함수의 제어권을 갖는다. 

2. 간혹 다른 함수의 규칙에 따라 콜백함수를 호출할 수도 있다. 

3. 미리 정해놓은 방식이라면, 어떤 시점에서 콜백을 호출할지, 인자는 어떤 값들을 지정할지, 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);

//결과
[ 1, 2, 3 ] 1 2

//but
arr.forEach(obj.logValues);

obj.logValues로 호출하면 메소드로서 호출. 왜냐면 앞에 점이 있으니까. 이때의 this는 obj

 

하지만, //but 다음 코드를 보면, forEach때문에 호출을 하지않음. 호출은 forEach가 할 것임 

forEach가 권한이 있기 때문에 forEach가 어떻게 호출하냐에 따라 this가 달라짐 

그래서, obj.logValues는 콜백함수로 전달이 됨. 메서드로서 호출한 것이 아님 

그래서 obj.logValues가 가리키고 있는 함수만 떼어서 전달. 함수로써 전달. 

그래서 this는 전역객체가 되어버림