[JS] 콜백함수

콜백함수란?

다른 코드의 인자로 넘겨주는 함수이다.
call+back으로, 어떤 함수 X를 호출하면서 특정 조건일 때 함수 Y를 실행해서 알려달라는 요청을 함께 보내는 것이다.
이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다.

이처럼 다른 함수에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.

콜백함수는 제어권과 관련이 깊다.
예시를 통해 구체적으로 살펴보자.

제어권

[호출 시점]

let count = 0;
let timer = setInterval(function () {
	console.log(count);
    if(++count > 4) clearInterval(timer);

}, 300);

setInterval 선언시 두 개의 매개변수를 전달했다. 익명함수와 300이라는 숫자이다.

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

setInterval구조를 보면, scope에는 객체 또는 worker의 인스턴스가 들어올 수 있다.
(일반 브라우저 환경에서 window를 생략해서 함수처럼 사용 가능)
매개변수로는 func(함수), delay(ms단위의 숫자)값을 반드시 전달해야 하고, 세 번째 매개변수부터는 선택적이다.

func에 넘겨준 함수는 매 delay마다 실행되며, 그 결과 어떠한 값도 리턴하지 않는다.
setInterval를 실행하면 반복적으로 실행되는 내용 자체를 특정할 수 있는 고유한 id 값이 반환된다.
이를 변수에 담는 이유는 반복 실행되는 중간에 종료할 수 있게 하기 위해서이다.

이해하기 쉽게 코드를 수정해보자.

let count = 0;
let cbFunc = function () {
	console.log(count);
    if(++count > 4) clearInterval(timer);

}

let timer = setInterval(cbFunc, 300)

// 실행결과
// 0 (0.3초)
// 1
// 2
// 3
// 4

timer변수에는 setInterval의 id값이 담긴다.
첫 번째 인자가 바로 콜백함수로, 0.3초마다 자동으로 실행된다.

setInterval이라고 하는 다른 코드에 첫 번째 인자로 cbFunc함수를 넘겨주자.
제어권을 넘겨받은 setInterval이 스스로의 판단에 따라 적절한 시점에 이 익명함수를 실행했다.
이처럼 콜백 함수의 제어권을 넘겨받은 코드는 콜백함수 호출 시점에 대한 제어권을 가진다.

[인자]

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

console.log(newArr);