Javascript - 고차 함수(Higher-Order Function)란 무엇일까?

고차 함수의 정의는 함수를 매개변수로 사용하거나 함수를 반환하는 함수입니다. 문장으로만 보면 어렵게 느껴질 수 있는 개념이지만 함수형 프로그래밍에서는 필수적으로 알아야 하는 개념이기도 합니다. 고차 함수(HOF)라는 용어가 생소하고 개념도 낯설어서 어렵다고 느껴질 뿐 조금만 익숙해지면 함수형 프로그래밍을 보다 빛나게 해주는 멋진 기술입니다. 예를 들어 자바스크립트의 filter(), map(), reduce() 함수도 고차 함수 개념을 활용해 만들어져 있습니다. filter()를 구현하는 방법에 대해서도 다룬 적이 있으니 흥미가 있으시다면 한 번 확인해보셔도 좋습니다.

 

 고차 함수와 비슷한 개념으로는 고차 컴포넌트(HOC: Higher-Order Component)도 있습니다. 고차 컴포넌트가 주로 리엑트(React)와 연관되어 설명되다 보니 리엑트에 포함된 개념이라고 생각하실 수도 있지만 고차 컴포넌트 개념은 기존의 컴포넌트(Component)를 가져와 새로운 컴포넌트로 반환하는 함수를 이야기합니다. 자 이제 코드를 보면서 고차 함수에 대해 알아볼까요?

고차 함수(HOF: Higher-Order Function)의 정의

다시 한번 고차 함수(HOF)에 대한 정의를 내린다면 다음과 같습니다. 고차 함수(HOF: Higher-Order Function)의 정의는 함수를 매개변수(Parameter)로 사용하거나 함수를 반환하는 함수입니다. 쉽게 말해 우리가 정의해서 사용하는 함수가 함수를 인자(Argument)로 받아서 사용하거나 결과 값으로 함수를 반환하게 한다면 고차 함수라는 이야기입니다. 어떻게 보면 함수(Function)를 정의할 때 함수를 사용하는 함수라고 정의해도 좋을 것 같네요.

 

- 함수를 매개변수로 사용하는 함수(HOF)

const functionExecutor = function (fn) {
  setTimeout(function() {
    fn();
  }, 10 * 1000);
};

functionExecutor(function () {console.log(1)});
functionExecutor(function () {console.log(2)});

 이 예제 코드는 특정 기능이 바로 동작하지 않고 10초 뒤에 실행되어야 한다는 가정에 작성한 코드입니다. functionExecutor() 함수는 인자로 함수를 전달받고 setTimeout()을 이용해 10초 후 전달받은 함수를 실행시킵니다.

 

- 함수를 반환하는 함수(HOF)

const division = function (divisionValue) {
  return function (value) {
    return value / divisionValue;
  };
};

const divisionBy10 = division(10);

console.log(divisionBy10(20));
console.log(divisionBy10(33));

 이 예제 코드는 나누는 값을 고정으로 두고 나뉘는 값이 매번 수정이 일어나는 상황을 가정해서 작성한 코드입니다. division() 함수는 나누는 값(divisionValue)을 전달받아 추후에 나뉘는 값(value)을 전달받을 때 나누기를 할 수 있도록 함수를 반환합니다.

 

 이 글에서 사용한 예제 코드는 Github 저장소를 통해서도 확인 할 수 있습니다.