[Javascript] 함수형 프로그래밍 (HOF)

Intro

함수형 프로그래밍 (HOF)에 대해 알아보도록 하자.

JS 에서 함수는 일급 객체다.

function fruit(sweetness) {
  return sweetness * 3;
}
const pear = fruit(1);
const strawberry = fruit(5);
const watermelon = fruit(3);

fruit이라는 함수 는 값으로 평가되서 다른 변수에 할당이 가능하다.자바스크립트에서 함수는 곧 값으로 인식되기 때문이다. 자바스크립트에서 함수는 변수처럼 사용할 수 있다. 함수가 값처럼 사용될 수 있다는 뜻은 배열이나 객체에도 넣을 수 있다는 뜻이다. 심지어 다른 함수의 인자로 넘겨주는 것 도 가능하다. 이러한 특성 때문에 자바스크립트의 함수는 특별한 취급을 받으며 이름 역시 일급 객체라는 독특한 이름을 부여받았다. 일급 객체의 가장 강력한 힘은 함수가 다른 함수를 반환하는 것이 가능하다는 점이다.

HOF 란 무엇인가?

HOF 는 Higher-Order-Function의 줄임말로 함수를 인자로 받고 반환 값 역시 함수를 반환하는 함수를 말한다.

// HOF
function f(x) {
  // HOF
  return function(y) {
    return function(x) {}
  }
}

Example

const numbers = [1, 2, 3, 4, 5, 6, 7];
const isGreaterThan = x => x > 4;
numbers.filter(isGreaterThan); // [5, 6, 7]

Array.prototype.filter 는 필터링에 사용할 함수를 전달받아 값의 필터를 거쳐 새로운 배열을 반환하는 함수다. 만약 HOF 가 불가능했다면 다음과 같이 작성해야 한다.

const filtered = [];
for (let i = 0; i < numbers.length; i += 1) {
  if (numbers[i] > 4) {
    filtered.push(numbers[i]);
  }
}

Conclusion

HOF 는 자바스크립트에서 함수형 프로그래밍을 가능케하는 굉장히 특별한 함수다. 특히나 값을 나중에 평가한다는 점에서 매우 활용도가 높다고 할 수 있다. 나아가서 리액트에서는, 다른 컴포넌트를 생산해내는 컴포넌트를 HOC, Higher-Order-Component 라고 지칭한다.

https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-hof-b72618965d2b