[Javascript] 콜백함수

콜백함수란?

콜백함수는 다른 코드의 인자로 넘겨주는 함수 이다.

콜백함수의 기능을 일상생활 예시를 통해 설명해보자.

불안해서 잠을 제대로 못자는 스펀지밥

A 와 B는 다음날 아침 8시에 만나기로 하고 잠을 잔다고 했을때, 약속장소에 가려면 적어도 6시에 일어나야한다. A는 불안한 마음에 수시로 잠에서 깨면서 시계를 확인하고 잠들기를 반복하다가 결국 5시에 이를 포기하고 일어난다. 반면 B는 시계알람을 세팅하고 해당 시간일때 알람이 울리는걸 알기에 쭉 잠을 자다가 해당 시간이 될때 상쾌하게 일어났다. A는 수시로 시간을 구하는 함수를 직접 호출한걸로 볼수있고

B는 시계 알람을 설정하는 함수를 호출하고 호출 당시에는 아무것도 하지않다가 정해준 시각이 됐을때 알람이 울리는 결과를 반환 한다.

A의 경우 시계 함수의 제어권은 A에게 있고, 시계는 그저 요청받은 내용을 이행할 뿐이다. 반면 B는 시계 함수에게 요청을 하면서 알람을 울리는 명령에 대한 제어권을 시계에게 넘겨준 것이다. 이처럼 콜백함수는 제어권과 관련이 깊다.

어떤 함수 X를 호출하면서 '특정 조건일 때 함수Y를 실행해서 나에게 알려달라'는 요청을 함께 보낸다. 이 요청을 받은 함수X의 입장에서는 해당 조건을 갖춰졌는지 스스로 판단하고 함수Y를 직접 호출한다. 이처럼 콜백함수는 다른코드(함수 or 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행할 것이다.

 

제어권

콜백함수 - setInterval

다음은 setInterval의 구조이다.

var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);

setInterval의 구조에서 scope는 window 객체 또는 Worker의 인스턴스가 들어갈 수 있다. 두 객체 모두 setInterval 메서드를 제공하기 때문이다. 일반적인 브라우저 환경에서는 window를 생략해서 함수처럼 사용가능 하다.  

(1)

var count = 0;
var timer = setInterval(function() {
	console.log(count);
    if(++count > 4) clearInterval(timer);
}, 300)

(2)

var count = 0;
var cbFunc = function() {
	console.log(count);
    if(++count > 4) clearInterval(timer);
}
var timer = setInterval( cbFunc, 300)

timer 변수에는 setInterval의 ID값이 담긴다. 첫번째 인자로 cbFunc함수(콜백함수)는 설정한 0.3(300)초마다 자동 실행된다.

이때 if문 조건에서 ++count는 count를 1씩 증가시킨다.

code	호출 주체	제어권
cbFunc();	사용자	사용자
setInterval(cbFunc, 300);	setInterval	setInterval

setInterval의 첫번째 인자로서 cbFunc를 넘겨주자 제어권을 넘겨받은 setInterval이 스스로의 판단에 따라 적절한시점(0.3초)에 익명함수를 실행한다.

 

(3) Array.prototype.map

var newArr = [10, 20, 30].map(function(currentValue, index){
	console.log(currentValue, index);
    return currentValue + 5;
});
console.log(newArr);

map메서드 구조

Array.prototype.map(callback[, thisArg])
callback: function(currentValue, index, array)

map 메서드의 첫번째 매개변수로 익명함수를 전달하고 map 메서드 구조에 따라 두번째 인자(thisArg)가 생략되었기 때문에 일반적인 함수처럼 전역객체가 바인딩 된다.map 메서드는 메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 하나씩 꺼내어 콜백 함수를 반복호출하고 콜백함수의 실행 결과들을 모아 새로운 배열을 만드는 기능을 한다.

만약 index와 currentValue의 순서를 바꿔서 출력하거나 호출하고싶다고해서 가능한게 아닌 컴퓨터는 그저 첫번째, 두번째 인자에 대한 순서에 의해서만 구분하기때문에 순서를 바꿔서 index, currentValue 라고해도 기능이 바뀌는건 아니다. 이는 정의된 규칙에 따라 함수를 작성하고 콜백함수를 호출하는 주체가 사용자가 아닌 map메서드이므로 콜백함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지는 사용자가 바꾸는게 아닌 map메서드에게 달린 것이다. 이처럼 제어권을 넘겨받은 코드는 콜백함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가진다.