🌈 인프런의
코어 자바스크립트(정재남)수강 후, 이해한 내용을 정리한 글입니다.
콜백 함수는 회신 되는 함수이다.
아래 그림을 상상하면 된다.
이러한 과정은 콜백 함수에 대한 제어권을 특정 함수에게 넘기는 과정이다.
제어권에는 무엇이 있을까
실행 시점, 매개변수, this가 있다. 하나씩 살펴보자.
1) 실행 시점
아래의 경우는 setInterval에게 콜백 함수의 실행 시점을 위임한 경우이다. setInterval은 콜백 함수를 1초마다 자동으로 실행시킨다.
var cb = function() {
console.log('1초마다 실행될 겁니다.')
};
setInterval(cb, 1000);2) 매개 변수
아래의 경우는 forEach에게 매개 변수를 위임한 경우이다.
var arr = [1, 2, 3, 4, 5];
var entries = [];
arr.forEach(function(v, i) {
entries.push([i, v]);
});
console.log(entries);매개 변수를 위임한다는 것의 의미는 forEach 내부의 규칙대로 매개 변수를 해석한다는 뜻이다. 내부 규칙은 MDN에 나와 있다. forEach 매개 변수의 내용과 순서, 콜백 함수의 매개 변수의 내용과 순서, forEach의 리턴값 등을 정의한 것을 내부 규칙이라고 할 수 있다.
위의 내부 규칙에 따라 forEach의 매개 변수인 익명 함수는 callbackFn, callbackFn의 첫 번째 매개 변수인 v는 element, callbackFn의 두 번째 매개변수인 i는 index로 해석된다.
3) this
아래의 경우는 addEventListener에게 this를 위임한 경우이다.
document.body.innerHTML = '<div id ="a">abc</div>';
function cbFunc(x) {
console.log(this, x);
}
const obj = {a : 1};
document.getElementById('a').addEventListener('click', cbFunc)코드에는 나타나지 않지만, MDN을 살펴보면 addEventListener는 this에 currentTarget이 바인딩 된다는 것이 명시되어 있다.
따라서 위 코드의 this에는 자동으로 <div id ="a">abc</div>가 바인딩 된다. 물론 cbFunc.bind()를 통해 바인딩할 특정 객체를 개발자가 지정할 수 있다.
주의! 메서드로 호출한 것과 콜백 함수로 전달하는 것을 구분하자.
아래 코드를 보자. 첫 번째 코드는 obj 안의 logValues라는 메서드를 호출한 것이다. 반면 두 번째 코드는 obj.logValues라는 함수를 forEach의 콜백 함수로 전달한 것이다.
obj.logValues(1, 2)
arr.forEach(obj.logValues)따라서, 이전 편에서 설명했던 this가 호출되는 5가지 경우의 수 중 각각 3️⃣, 4️⃣의 경우에 해당한다.
- 1️⃣ 전역 공간에서 this 호출
- 2️⃣ 함수 호출 시 this 호출
- 3️⃣ 메서드 호출 시 this 호출 :
obj.logValues(1, 2)(호출 완료) - 4️⃣ callback 호출 시 this 호출:
arr.forEach(obj.logValues)(호출 전, 전달만 함) - 5️⃣ 생성자 함수 호출 시 this 호출
이러한 차이로, logValues 내부의 함수에 있는 this에는, 첫 번째 코드는 obj가, 두 번째 코드는 전역 객체가 바인딩 된다.
3줄 요약
- 콜백 함수는 회신 되는 함수이다.
- 콜백 함수를 넘기를 과정은 특정 함수에게 제어권(실행 시점, 매개 변수, this)을 위임하는 것과 같다.
- 메서드로 호출하는 것과 콜백 함수로 넘기는 것을 구분하자.
