[코어JS] 4. 콜백 함수

직역하면 회신되는 함수.

함수에게 콜백함수를 처리해달라는 요청을 하면 넘겨받은 함수가 처리한 다음 처리가 끝나면 알려줌.
다르게 표현하면 콜백함수에 대한 제어권을 넘긴다는 뜻.
위임하게 될 제어권에는 실행시점, 매개변수, this가 있음.
앞 장의 this장에서 addEventListener함수의 this가 dom 엘리먼트가 됐던것도 같은 맥락.

제어권 위임1 - 실행 시점

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

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

setInterval(cb, 1000);

this장에서 보았던 setTimeout과 마찬가지로 setInterval도 실행시점에 대한 제어권을 위임함. 일정 시간 간격으로 한번씩 함수를 실행해주는 함수. 첫 인자로 콜백함수, 둘째인자로 주기를 받음.

setInterval에게 함수를 넘겨주고 나면 setInterval이 알아서 주기마다 콜백함수를 실행. 개발자가 콜백함수를 넘겨주면 개발자가 실행명령을 내려서 실행하는 것이 아니고, setInterval이 알아서 실행해줌(제어권을 넘김).

제어권 위임 2 - 매개변수

forEach는 배열에 있는 요소들을 순서대로 하나씩 꺼내서 콜백함수의 첫번째 매개변수에 값, 두번째 매개변수에 index를 부여하며 함수를 실행. forEach의 첫번째인자는 callback함수, 두번째 인자는 thisArg임. 두번째 인자는 생략가능함. 반환값은 undefined.

forEach에게 콜백을 넘기면 이 콜백함수에 들어올 매개변수의 내용, 순서는 전적으로 forEach에 정의된 방식에 따름. forEach의 콜백으로 넘길 용도로 만들 함수를 정의할 것이면 forEach의 입맛에 맞게 만들어야함.

제어권 위임 3 - this

addEventListener의 콜백함수 내부에서의 this는 HTML DOM 엘리먼트를 의미하고, 인자는 해당이벤트에 대한 event객체를 의미함. 이유는 addEventListener가 그렇게 정의했기 때문. addEventListener가 콜백함수를 받을 때 this는 eventTarget으로 하고, 첫번째 인자는 event객체임.


this의 값을 바꿔주기 위해서는 bind메서드를 사용할 수 있음.

정리

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

주의

콜백은 함수임.

메서드로 호출하게되면 this가 obj가 됨.

freEach의 콜백함수로 obj.logValues를 넘겨주면 호출한 것이 아니고 콜백함수로 넘긴것임. obj.logValues가 가리키고 있는 함수만 떼어서 전달한 것. 함수앞에 점이 있다고 점 앞의 obj가 this라고 생각하면 오산. forEach가 어떤 식으로 호출하냐에 따라 this가 달라짐. 여기서는 호출은 forEach가 함수로서 할 것. 따라서 this에는 obj가 아닌 전역객체가 담기게 됨. 중요한것은 콜백으로 넘기는 것은 무조건 함수라는 점.

this로 지정하기 위해서는 bind메서드를 사용하거나, forEach에서 정의한 데로 두번째 매개변수로 thisArg를 넘겨줌.

두가지가 다른 것이란 것에 주의할 것.