1. 콜백 함수(Callback Function)란?

콜백함수(Callback Function)란 어떤 함수에 인자로 전달되어, 이 어떤 함수의 내부에서 실행되는 함수이다. 즉, 어떤 함수를 호출할 때 콜백함수를 인자 넘기면, 이 어떤 함수가 실행될 때 내부에서 콜백함수를 실행한다. 물론 콜백함수가 전달되면 어떤 동작을 할지 미리 정의가 되어 있기 때문에 그 동작에 알맞은 콜백함수를 작성해서 전달하여야 한다.

밑의 예제를 보자. 예제에서는 callback_example 함수가 콜백함수가 된다. filter 함수를 실행할 때 이 callback_example 함수를 인자로 전달한다. filter 함수는 이 콜백함수를 사용해서 참인 녀석들만 리스트에서 뽑아내서 결괏값으로 돌려준다.

const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];

function callback_example(element) {
    return element.length > 6;
}
let filteredWords = words.filter(callback_example);
console.log(filteredWords);

콘솔 로그 출력 결과는 아래와 같다. 워드의 길이가 6 초과인 녀석들만 새로운 리스트로 반환되었다.

[ 'exuberant', 'destruction', 'present' ]

자바스크립트에서는 이런 식으로 익명함수를 사용하는 경우가 많이 나온다. 잘 알고 넘어가야 하는 개념이다.

2. 익명 함수(Anonymous Function) 사용법

콜백함수와 단짝처럼 등장하는 녀석이 익명함수이다. 콜백함수를 인자로 전달할 때 보통 익명함수 형태로 전달하기 때문이다. 익명함수는 여러가지 표현법이 가능한다. 아래 익명함수 표현은 모두 동일한 표현이다. 코드를 줄이기 위한 노력으로 조금씩 변경된 결과이다.

2.1. 익명 함수 사용

함수 이름을 생략한 익명 함수 형태이다.

let newWords = words.filter(function (element) {
  return element.length > 6;
});

2.2. 애로우 펑션 사용

function 이라는 키워드를 생략한 형태이다. 함수임을 표현하기 위해서 화살표(=>)를 사용해 애로우 펑션임을 표현했다.

let newWords = words.filter((element) => {
  return element.length > 6;
});

2.3. 괄호 생략 가능

애로우 펑션 표기에서 변수가 한개인 경우는 괄호를 생략 가능하다.

let newWords = words.filter(element => {
  return element.length > 6;
});

2.4. 중괄호와 return 도 생략 가능

애로우 펑션 표기에서 함수의 코드가 한줄인 경우는 중괄호와 return 도 생략 가능하다. 아래 코드는 return이 생략되어 있지만 결괏값이 전달된다.

let newWords = words.filter((element) => element.length > 6);

2.5. 인수 없는 경우

인수가 하나도 없는 경우는 괄호를 비워둘 수도 있다. 단, 괄호까지 생략은 불가능하다.

let newWords = words.filter(() => true);