콜백함수

콜백함수

//외부에서 전달받은 f를 n만큼 반복 호출하기.
function repeat(n,f) {
	for(let i = 0; i < n; i++){
    	f(i);   // i를 전달하면서 f를 호출한다.
    }
};
let logAll = function(i){
	console.log(i);
};
//반복호출 할 함수를 인수로 전달한다.
repeat(5, logAll);  // 0 1 2 3 4 

let logOdds = function(i){
	if(i%2) console.log(i);
};
//반복 호출 할 함수를 인수로 전달한다.
repeat(5,logOdds);  // 1 3

 

위 repeat함수는 경우에 따라 변경되는 일을 함수 f로 추상화했고 이를 외부에서 전달받는다.

repeat함수는 더 이상 내부로직에 의존하지 않고 외부에서 로직의 일부분을 함수로 전달받아 수행하므로 더욱 유연한 구조를 갖게된다.
이처럼 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수,
매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라 한다.

 

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

 

//익명 함수 리터럴을 콜백함수로 고차함수에 전달한다.
//익명 함수 리터럴은 repeat 함수를 호출할 때마다 펴악되어 함수 객체를 생성한다.
repeat(5,function(i) {
	if(i%2) console.log(i);
});  // 1 3

 

// logOdds 함수는 단 한번만 생성한다.
let logOdds = function(i){
	if(i%2) console.log(i);
};
// 고차함수에 함수 참조를 전달한다.
repeat(5,logOdds);  // 1 3

 

콜백함수는 함수형 프로그래밍 패러다임 뿐만 아니라 비동기 처리(이벤트처리, Ajax통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.

 

	//콜백함수를 사용한 이벤트처리 - 버튼 클릭시 콜백함수 실행.
document.getElementById('myButton').addEventListener('click', function(){
  console.log('btn clicked!');
});
	//콜백함수를 사용한 비동기 처리  - 1초후 메세지 출력.
setTimeout(function(){
  console.log('1초 경과');
},1000);

 

콜백 함수는 비동기 처리뿐 아니라 배열 고차함수에서도 사용된다.

 

// 콜백 함수를 사용하는 고차함수 map
let res = [1,2,3].map(function(item){
	return item*2;
});
console.log(res);  // [2,4,6]

// 콜백 함수를 사용하는 고차함수 filter
let res = [1,2,3].filter(function(item){
  return item%2;
});
console.log(res);  // [1,3]

// 콜백 함수를 사용하는 고차함수 reduce
let res = [1,2,3].reduce(function (acc,cur){
  return acc+cur;
}, 0);
console.log(res); // 6

 

 

 

 

 

출처

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리