콜백 함수 - 기본개념

콜백함수란

다른 함수의 인자로 활용되는 함수를 콜백함수라고 한다. 즉, 콜백함수는 다른 코드(함수 혹은 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.
콜백함수를 활용하는 대표적인 함수는 forEach나 setTimeout 등이 있다.

콜백함수를 넘겨받는 forEach나 setTimeout과 같은 함수들은 이 콜백함수를 필요에 따라 적절한 시점에 실행하게 된다.(제어권이 그들에게 있다는 말)

ex) forEach야 나(콜백함수)는 이런 함수인데 나의 제어권을 너에게 넘길테니 너가 구동되는 원리대로 각각의 요소에 나를 적용해줘
ex) setTimeout아 나(콜백함수)는 이런 함수인데 나의 제어권을 너에게 넘길테니 너가 구동되는 원리대로 ~초 후에 나를 실행해줘

콜백함수의 제어권

콜백함수의 제어권을 넘겨받은 코드가 갖게 되는 제어권은 다음과 같다.

1. 호출 시점
2. 인자
가령 forEach나 map과 같은 메서드에 콜백함수가 들어갈 때, 콜백함수의 첫번째 인자는 순회를 돌게 되는 요소 그 자체에 대한 변수명이 되고, 두번째 인자는 순회를 돌게 되는 요소들의 인덱스값이 된다. 이는 임의로 달리 조작하거나 순서를 바꿀 수 없다.
3. this
콜백함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조한다. 하지만 예외사항이 있는데, 제어권을 넘겨받을 코드에서 콜백함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다는 것이다.

<script>
//이젠 이 코드를 좀 더 잘 이해할 수 있어요!!

// setTimeout은 내부에서 콜백 함수를 호출할 때, call 메서드의 첫 번째 인자에
// 전역객체를 넘겨요
// 따라서 콜백 함수 내부에서의 this가 전역객체를 가리켜요
setTimeout(function() { console.log(this); }, 300); // Window { ... }

// forEach도 마찬가지로, 콜백 뒷 부분에 this를 명시해주지 않으면 전역객체를 넘겨요!
// 만약 명시한다면 해당 객체를 넘기긴 해요!
[1, 2, 3, 4, 5].forEach(function (x) {
	console.log(this); // Window { ... }
});

//addEventListener는 내부에서 콜백 함수를 호출할 때, call 메서드의 첫 번째
//인자에 addEventListener메서드의 this를 그대로 넘겨주도록 정의돼 있어요(상속)
document.body.innerHTML += '<button id="a">클릭</button';
document.body.querySelector('#a').addEventListener('click', function(e) {
	console.log(this, e);
});
</script>

콜백함수는 함수다

콜백함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로 호출한다.

<script>
var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
		console.log(this, v, i);
	}
};

//method로써 호출
obj.logValues(1, 2);

//>> 여기서는 this가 실행된 함수가 귀속된 obj로 바인딩 되었다.

//callback => obj를 this로 하는 메서드를 그대로 전달한게 아니에요
//단지, obj.logValues가 가리키는 함수만 전달한거에요(obj 객체와는 연관이 없습니다)
[4, 5, 6].forEach(obj.logValues);

//>> 여기서는 콜백함수로 함수가 전달된 것이기 때문에 this는 전역객체에 binding된다.
//>> [4, 5, 6].forEach(function(v, i) {
//>>    console.log(this, v, i);
//>>    })와 다를바 없다.
</script>