Higher Order Function(HOF)이란?

1. HOF란, 아래 두 조건 중 하나를 만족하는 함수이다.

• 하나 이상의 함수를 인자로 받는다

• 함수를 결과로 반환한다.

즉, 함수를 다루는 함수를 말한다.

예제 코드

const repeatTwice = function(func, num) {
  return func(func(num));
};

const plusOne = function(num) {
  return num + 1;
};

console.log(repeatTwice(plusOne, 1));
// 출력결과 : 3

• repeatTwice()는 함수를 인자로 받아 해당 함수를 두번 반복실행하는 함수이다.

인자로 들어오는 함수가 무엇이냐에 따라 어떤 내용을 반복 실행할지가 달라진다. 즉, 사용자가 원하는대로 로직을 제어할 수 있다.

2. 제어 패턴 추상화(Abstracting Patterns of Control)

HOF는 함수의 흐름을 제어하는 파라미터로써 함수를 수용한다.

아래와 같이 0부터 99까지 출력함는 함수가 있다.

for (let i = 0; i < 100; i++) {
  console.log(i);
}

만약 99가 아닌 n까지 출력해야 할 경우, 해당 부분을 함수로 만들어 유연하게 대처할 수 있다.

function repeat(n) {
  for (let i = 0; i < n; i++) {
    console.log(i);
  }
}

repeat(10000);

그러나

• 출력하지 말고 배열에 담아야 할 경우?
• 출력과 배열을 동시에 해야할 경우?
• 짝수만 골라 출력하라고 할 경우?
• ...
  
  

HOF를 사용해 위와 같이 달라지는 요구사항에 유연하게 대응할 수 있는 구조를 만들 수 있다.

세부사항을 추상화하여 함수로 제공한다.

function repeat(n, fn, interval) {
  for (let i = 0; i < n; i = interval(i)) {
    fn(i);
  }
}

//0부터 99까지 배열에 담기
const list = [];
repeat(100, 
       (i) => list.push(i), 
       i => i === 0 ? ++i : i+i);
// list = [0, 1, 2, 4, 8, 16, 32, 64]

3. 함수를 반환하는 함수

예제 코드

function fillArray(n, fn) {
  let array = [];
  for (let i = 0; i < n; i++) {
    array.push(fn(i));
  }
}

function makeItem(i) {
  return i => `item${i}`;
}

const array = fillArray(3, makeItem);
// array = [ 'item0', 'item1', item'2']

• makeItem()함수가 함수를 반환하는 함수이다.
• 함수를 리턴 함으로써 item${i} 은 클로저(Closure)로 메모리에 계속 남아있게 되므로 다른곳에서 사용할 수 있다.

4. 흔히 사용하는 HOF

1) Array.map(func)

각 인덱스에 따른 데이터 맵핑 시 사용

let result = [1, 2, 3]

result.map(value => value * 2);

console.log(result);
//출력결과 : [2, 4, 6]

• 배열의 각 요소를 순회하며 인자로 받은 함수의 해당 로직을 수행한다.
• 반환값을 해당 인덱스에 추가하고 순회가 끝난 배열을 반환한다.

2) Array.reduce(func)

각 요소를 순회한 결과를 누적값으로 가져가야 하는 경우에 사용

let result = [1, 2, 3]

result.reduce((acc, cur) => acc + cur);

console.log(result);
//출력결과 : 6

• 배열의 각 요소를 순회하며 인자로 받은 함수의 해당 로직을 수행한다.
• 각 순회마다 결과값을 acc에 저장한다.
• 순회가 끝난 결과를 반환한다.

5. HOF로 구성된 함수형 라이브러리인 Ramda

ramdajs.com 참고

⭐정리⭐

• HOF는 자바스크립트에서 함수형 프로그래밍을 가능하게 한다.

• 함수를 인자로 받아 함수를 반환하므로 이는 곧 함수끼리의 합성을 의미한다.

• 특히 값을 나중에 평가한다는 점에서 매우 활용도가 높다.