본문 바로가기

💻 개발자/🔨 HTML, CSS, JS

[JS] 고차함수(higher order function)이란?

반응형

고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다.

 

  • 함수는 변수에 저장할 수 있다.
  • 함수를 담은 인자로 전달받을 수 있다.
  • 함수 내부에서 변수에 함수를 할당할 수 있다.
  • 함수는 이 변수를 리턴할 수 있다.

이때 다른 함수(caller)의 인자(arument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.

 

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

function triple(num) {
  return num * 3;
}

function tripleNum(func, num) {
  return func(num);
}

// 함수 tripleNum은 다른 함수를 인자로 받는 고차 함수이다.
// 함수 func는 함수 doubleNum의 콜백 함수이다.

let result = tripleNum(triple, 2)
console.log(result); // -> 6

 

2. 함수를 리턴하는 경우

function adder(added) {
  return function (num) {
      return num + added;
    }
  }
  
  // 함수 adder은 다른 함수를 리턴하는 고차 함수이다.
  // adder은 인자 한 개를 입력 받아서 익명 함수를 리턴한다.
  // 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴한다.
  
  // adder(4) 자체가 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
  let result = adder(4)(6)
  console.log(result) // -> 10
  
  // adder이 리턴하는 함수를 변수에 저장할 수 있다.
  // JS에서 함수는 일급 객체이기 때문이다.
  const add5 = added(5)
  result = add5(4)
  console.log(result); // -> 9

 

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

function triple(num) {
  return num * 3;
  }
  
function tripleAdder(added, func) {
  const tripled = func(added);
  return function (num) {
    return num + tripled;
  };
}

// 함수 tripleAdder은 고차 함수이다.
// 함수 tripleAdder의 인자 func는 함수 tripleAdder의 콜백 함수이다.

// tripleAdder(3, triple)은 함수이므로 함수 호출 기호 '()'를 사용할 수 있다.
tripleAdder(3, triple)(1) // -> 10

// tripleAdder이 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체)
const result = tripleAdder(3, triple);
result(1) // -> 10
반응형