[JavaScript] 콜백 함수(callback function)란?

콜백 함수란?

- val는 함수지만 지금 바로 실행되지 않고, fn 함수의 입력값으로 전달돼서 fn 함수에 의해 나중에 호출된다.

- 이렇게 다른 함수에 의해 나중에 호출되는 함수를 콜백 함수라고 한다.

val = function(🐑) {
  return 🐈
}
function fn(arg) {
  arg();
}
fn(val)

 

콜백함수 이해하기

콜백함수를 갖는 메소드인 javascript.array.filter()를 통해 콜백함수를 이해해보자

// 함수 구조
arr.filter(callback(element[, index[, array]])[, thisArg])

[ 매개변수 ]
- callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다.
- element : 처리할 현재 요소.

예제

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
function callback(element) {
  console.log(element);  // spray limit elite exuberant destruction present
  if (element.length > 6) {
    return true;
  } else {
    return false;
  }
}
words.filter(callback);  // [ 'exuberant', 'destruction', 'present' ]

- callback 함수를 정의해 filter 함수의 인자로 줌으로서, callback 함수는 바로 호출되지 않고 filter 함수 실행에 의해 callback 함수가 호출된다.

- callback 함수의 인자(element)는 앞의 words 배열이다.

- 위 코드를 간단히 하면 다음과 같다.

// 함수 간단히
function callback(element) {
  console.log(element);
  return element.length > 6;
}
newWords = words.filter(callback);

// 익명함수로 만들기
newWords = words.filter(function(element) {
  return element.length > 6;
});

// 화살표 함수
newWords = words.filter((element) => {
  return element.length > 6;
});

// 더 간결한 화살표 함수
newWords = words.filter(element => element.length > 6);

- arr.filter와 똑같이 동작하는 myfilter 함수 만들기(콜백 함수를 인자로 받음)

function myfilter(origin, callback) {
  var result = [];
  for(var i=0; i<origin; i++) {
    var current = origin[i];
    if (callback(current)) {
      result.push(current)
    }
  }
  return result;
}
newWords = myfilter(words, element => element.length > 6);

해당 게시글은 생활코딩님의 JavaScript - callback 강의를 참고해 작성했습니다.