콜백함수 (callback function)

ming0·2022년 5월 13일
0
post-thumbnail

📖Today I Learned

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

function repeat(n) {
  for (let i=0; i<n; i++) {
    console.log(i);
  }
}
repeat(5);	// 0, 1, 2, 3, 4
function repeat(n) {
  for (let i=0; i<n; i++) {
    if(i%2) console.log(i);
  }
}
repeat(5);	// 1, 3

위의 두 코드를 재사용하기 위해 사용하기도 한다.

// f를 통해 함수의 외부에서 콜백 함수를 전달받는 함수
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

고차함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수

function sum(x, y, c){
  c(x + y);
  return x + y;
}
 
function documentWrite(s){
  document.write('콜백함수', s);
}
 
sum(10, 20, documentWrite);


비동기 처리

  • 콜백함수는 함수형 뿐만이 아닌 비동기 처리(이벤트 처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.
    (동기적 - 순차적으로 실행 / 비동기 처리 - 흐름을 기다리지 않고 끝나는 순서대로 실행)
// myButton을 클릭하면 콜백함수 실행
document.getElementById('myButton').addEventListener('click', function() {
  console.log('button clicked!!');
});

// 콜백 함수를 사용한 비동기 처리
// 1초 경과 후 메시지 출력
setTimeout(function () {
  console.log('1초 경과');
}, 1000);

배열 고차 함수

  • 콜백함수는 비동기 처리뿐만이 아니라 배열 고차 함수에서도 사용된다.
// 콜백 함수를 사용하는 고차 함수 map
var res = [1,2,3].map(function (item) {
  return item * 2;
});

console.log(res);	// [2,4,6]

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

console.log(res);	// [1,3]

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

console.log(res);	// 6

0개의 댓글