고차함수 이해하기

예제를 통해 알아보자.

1. 다른 함수를 인자로 받는 경우

function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  let doubledArr = [];
  return func(num);
}

//함수 doubleNum은 다른 함수를 인자로 받는 고차함수
//함수 doubleNum의 첫번째 인자 func에 함수가 들어올 경우
//함수 func는 함수 doubleNum의 콜백 함수
//아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백함수
let output = doubleNum(double, 4);
console.log(output);

2. 함수를 리턴하는 경우

function adder(added) {
  return function (num) {
    return num + added;
  };
}

//함수 adder는 다른 함수를 리턴하는 고차함수
//adder는 인자 한 개를 입력받아서 함수를 리턴
//리턴되는 익명함수는 인자 한개를 받아서 added와 더한 값을 리턴

//adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있음
let output = adder(5)(3);
console.log(output);

//adder가 리턴하는 함수를 변수에 저장할 수 있다
//javascript에서 함수는 일급 객체이기 때문
const add3 = adder(3);
output = add3(2);
console.log(output);  // -> 5

3. 함수를 인자로 받고, 함수를 리턴하는 경우

function double(num) {
  return num * 2;
}

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + added;
  };
}

// 함수 doubleAdder는 고차 함수입니다.
// 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수 입니다.
// 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다.
doubleAdder(5, double)(3); // -> 13

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8

좀 더 명확한 이해가 필요하다면 아래 예제를 확인한다.

//함수를 인자로 받고 리턴하는 고차함수
function doubleAdder(added, func) {
  const doubled = func(added);
  return function(num) {
    return num + doubled;
  };
}

//콜백함수
function double(num) {
  return num * 2;
}

//콜백함수를 인자로 하여 고차함수 호출
doubleAdder(5, double)(2);

const add3 = doubleAdder(3, double);
add3(2);

doubleAdder(5, double)(2)를 실행하게 되면 12라는 결과가 출력한다.
doubleAdder의 인자 5를 double함수에 인자로 돌려주어 10이라는 값을 받아낸 이후 function(num)을 실행하여 12라는 결과를 받아온다.

아래의 add3도 이러한 방식으로 받아온다