callback

1. 콜백 함수(callback function)

콜백함수란 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 말한다.

다음 코드는 어떤 일을 반복 수행하는 함수이다.

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

이 함수는 매개변수를 통해 전달받은 숫자만큼 반복하여
console.log(i)를 호출한다.
이때 이 함수의 반복문 내부에서 다른 일을 하고 싶다면
다음코드와 같이 새롭게 함수를 정의해야한다.

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

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

함수의 일부분만 다를 뿐인데 위 처럼 함수를 새롭게 정의하는 것은
개발자스럽지 못한 작업이다.😅

하지만 이 문제는 함수를 합성하는 것으로 해결할 수 있다.
함수의 공통된 로직은 미리 정의 해두고,
경우에 따라 변경되는 로직은 함수 외부에서 가져다 쓰는 방식이다.

function repeat(n, f) {
	for( let i = 0; i < n; i++ ) {
    	f(i) // repeat함수 내부의 인자 i를 함수 f에게 전달~
        // 요기서 f는 그냥 매개변수이다. 즉 어떤 함수라도 들어갈 수 있다.
    }
}

// 가져다 쓸 함수1
const logAll = (i) => {
	console.log(i)
}
repeat(5, logAll)

// 가져다 쓸 함수2
const logOdds = (i) => {
	if ( i % 2 ) console.log(i)
}
repeat(5, logOdds)

여기서 repeat 함수는 경우에 따라 변경되는 일을 함수 f로 추상화했다.(매개변수로 받는다)
또한 repeat함수의 f는 외부에서 전달받는다.

이것이 가능한 이유는 자바스크립트의 함수가 일급 객체이기 때문이다.

여기서 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.

이로써 repeat함수는 더 이상 내부로직에 강력히 의존하지 않고,
유연하기 외부에서 로직의 일부분을 함수로 전달받아 수행하는 유연한 구조를 갖게 되었다.

이처럼 콜백함수를 사용하면 유연하게 코딩할 수 있다👍

참고문헌 : 이웅모, 『모던 자바스크립트 Deep Dive 』, 위키북스(2020), p.183 ~ p.185.