[CoreJavascript] 4과 콜백함수(callback function)

콜백 함수(callback function)

• 함수를 처리해달라고 요청하고, 이 요청을 넘겨받은 쪽에서 알아서 작업을 한 다음 처리가 끝난 뒤 요청한 쪽으로 알려주는 것.(<=> callback 함수에 대한 제어권을 넘긴다는 것을 의미(= 제어권 위임) )
• 제어권을 위임한다는 것은 아래의 것들을 넘겨준다는 것을 의미한다.

• 실행 시점
• 매개변수
• this

1. 실행 시점

setInterval SPEC => setInterval(callback func, milliseconds) callback Func를 milliseconds 뒤에 setInterval 함수가 실행시켜준다. 사용자가 milliseconds 마다 callback func에 있는 내용을 호출해줄 필요 없이.
setInterval(() => {
console.log('1초 간격으로 실행')
}, 1000)


2. 매개변수

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

console.log(entries);

1번 호출 결과
[0, 1, 10], [1, 2, 20], ... , [4, 5, 50]
forEach() 내부에 2번째로 전달되는 인자가 this로 바인딩되는 것을 유추할 수 있음

2번 호출 결과
[0, 1, Window], [1, 2, global], ... , [3, 4, global], [4, 5, Window]


3. this

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

id가 a인 div를 클릭 시 호출결과
<div id="a">abc</div> // 클릭한 대상이 나옴
PointerEvent {isTrusted: true, pointerId: 1, width:1, height: 1, ... } // PointerEvent라는 click event에 대한 이벤트 객체가 나옴.
위와 같은 출력결과가 나온 이유는 addEventListener 내부적으로 위와 같이 결과를 호출하게 해놓았기 때문. 곧, this는 eventTarget으로 하고 콜백함수의 첫번째 인자에는 event 객체를 넘겨주도록 정해놓았기 때문.

위와 같은 상황에서 this를 다른 객체로 하려고 하는 경우 어떻게 해야할까?
아래의 obj로 this를 변경하려고 하는 경우, cbFunc에 obj를 바인딩한다.
const obj = { a: 1};
document.getElementById('a')
.addEventListener('click', cbFunc.bind(obj))


콜백함수의 특징

• 다른 함수(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 {
consoel.og(this, v, i);
}
}
}

obj.logValues(1, 2); // [1,2,3], 1, 2 / logValues를 메서드로써 호출
arr.forEach(obj.logValues);

logValues가 메서드로써 호출된 것이 아님.
'호출'을 하지 않았고, obj.logValues라는 콜백 함수는 forEach에서 호출할 것임.
forEach에서 어떤 식으로 호출하느냐에 따라 this가 달라질 수 있다.
obj.logValues는 메서드로서 호출된 것이 아닌 단지 콜백함수로써 전달된 것.

호출 결과
Window { ... } 1 0
Window { ... } 2 1
Window { ... } 3 2
Window { ... } 4 3
Window { ... } 5 4

정리
메소드로 호출 <=> obj.logValues(1, 2);
콜백함수로 전달 <=> arr.forEach(obj.logValues);