콜백함수와 고차함수

콜백함수와 고차함수를 공부하다보면 전체적인 그림을 그리지 못하여 올바른 이해가 힘든 경우가 있다.

특히 js의 Array의 고차함수를 공부하다보면 각각의 사용법은 익숙해지지만 정작 고차함수와 콜백함수의 정확한 정의는 놓치는 경우가 많다.

이번 포스팅에선 콜백함수와 고차함수의 정의가 어떠한 것인지 알아보겠다.

함수의 주입

어떠한 작업을 수행하는 함수를 정의해보자

function job(n) {
	for (let i = 0;i <= n; i++) console.log(i);
}

job(5); // 0 1 2 3 4 5

위에서 선언한 job이라는 함수는 매개변수로 전달받은 숫자만큼 console.log를 반복하여 호출한다.
이때 job함수는 console.log(i)에 강하게 의존하는 상태이다.

이런 경우 "짝수만 프린트"같은 다른 작업을 수행하기 위해선 새로운 함수를 정의해야한다.

function job1(n) {
	for (let i=0; i<=n; i++) console.log(i);
}

job1(5); // 0 1 2 3 4 5

function job2(n){
	for (let i = 0; i<=n; i++){
    	if (i % 2 == 0) console.log(i)
    }
}

job2(5); // 0 2 4

위 예제의 job1과 job2는 일정 범위를 반복하는 작업은 공통적으로 수행하지만, 반복하면서 하는 일의 내용은 다르다.

즉, 공통부분이 있지만 차이가 나는 부분이 있기 때문에 매번 함수를 새롭게 정의해야한다.

이러한 문제를 함수의 합성을 이용하여 다음과 같은 방법으로 해결할 수 있다.

1. 공통으로 수행되는 로직을 미리 정의한다.
2. 상황에 따라 변경되는 로직을 추상화하여 외부에서 내부로 주입받는다.

//외부에서 주입된 func를 n만큼 반복하며 호출한다.
function job(n, func) {
	for (let i=0; i<=n; i++) func(i);
}

let printAll = function (num) {
	console.log(num);
};

let printEven = function (num) {
    if(num % 2 == 0) console.log(num);
};
//반복 호출할 함수를 인수로 주입한다.
job(5, printAll); // 0 1 2 3 4 5
job(5, printEven); // 0 2 4

자바 스프링을 경험해본 독자라면 DI와 유사한 개념을 떠올릴 수 있을 것이다. 본질적으로 동일한 개념을 공유하는 것으로 생각한다.

콜백 함수

자바스크립트의 함수는 일급 객체이므로 함수의 매개변수로 함수를 전달할 수 있어 위와 같은 디자인이 가능하고, job함수는 더 이상 내부 로직에 강력히 의존하지 않아 더욱 유연한 구조를 갖게 된다

이처럼 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 콜백 함수를 전달받는 함수를 고차함수 라고 한다

고차 함수

고차 함수는 매개변수를 통해 전달받은 콜백 함수를 호출 시점을 결정하여 호출한다. 따라서 콜백 함수는 고차 함수에 의해 호출되며, 이 때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

일반적으로 콜백 함수가 고차 함수 내부에만 호출된다면 콜백 함수를 익명 함수 리터럴로 정의하면서 곧바로 고차 함수로 전달하는 것이 일반적인 방법이다.

job(5, function (num) {
	if (num % 2 == 0) console.log(num);
}); // 0 2 4