JS | 콜백함수(Callback function)

콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수.
A와 B는 다음 날 오전 6시에 만나기로 약속하였다. 약속에 늦을까 불안한 마음에 A는 새벽에 수시로 깨어 시계를 확인했다. B는 5시에 알람을 맞춰두고 편히 자다가 알람을 듣고 일어났다. A의 경우 시계 함수의 제어권을 자신이 가지고 있고 시계는 A의 요청에 의해 그때그때 시간을 알려줄 뿐이다. B는 시계 함수에 시간을 요청하며 알람을 울리는 명령에 대한 제어권을 넘겨주었다고 할 수 있다. - 코어자바스크립트 발췌
콜백함수는 제어권과 관련이 깊다.함수의 실행시점이 우리가 호출하는 시점이 아니라 다른 Logic 혹은 method에 의해 결정된다면 그 함수는 콜백 함수라고 볼 수 있다.

비동기와 콜백 함수의 동작 원리

부모님이 외출하시면서 오늘 해야할 집안일들이 적힌 메모를 주고가셨다. 이것들을 동기적으로 수행한다면 우리는 메모에 적힌 일들을 순차적으로 해야만 하고, 한 가지 일을 시작하면 그 일이 끝나기 전에 다른 일을 할 수 없다.
세탁기에 빨래를 돌리고 다른 일들을 할 수 있는데 할 수 없기 때문에 시간이 낭비된다. 이런 단점을 개선하기 위해 우리는 비동기적으로 일을 처리할 수 있다. 빨래가 돌아가는 동안 설거지, 강아지 목욕, 바닥 쓸기 중 한 가지를 할 수 있다. 만약 로봇 청소기가 있다면 바닥 쓸기 대신 로봇 청소기를 돌리고 그 시간 동안 또 다른 일을 할 수 도 있다.

1. 빨래
2. 설거지
3. 강아지 목욕
4. 바닥 쓸기

집안일이 적힌 메모는 콜백 함수이며, 부모님이 우리에게 이 메모를 전달해준 순간을 콜백 함수 호출 시점이라고 할 수 있다. 그리고 우리는 메모를 전달 받은 즉 콜백 함수 호출 시점에 해당 일들에 대한 처리 순서를 결정 할 수 있는 콜백함수의 제어권을 넘겨받은 것이다. 그리고 우리는 콜백함수의 제어권을 넘겨받은 코드가 되었다.

콜백함수는 함수이다.

콜백 함수로 obj 객체의 doChores 메서드를 전달했는데, doChores 메서드는 함수로 호출된다. obj를 this로 하는 메서드를 그대로 전달한 것이 아니라 obj.doChores 가 가리키는 함수만 전달한 것이다.
forEach에 으해 콜백이 함수로 호출되고, 별도로 this를 지정하지 않았으므로 함수 내부에서 this는 전역 객체를 바라보게 된다.
콜백 함수 내의 this에 다른 값 바인딩 하기
콜백 함수 내부에서 this 가 객체를 바라보게 하고 싶다면 ES5 에서 도입된 bind를 사용하면 된다.