함수형프로그래밍 - HOF

일급객체 (first-class object)

자바스크립트에서 함수는 일급객체이다. 일급 객체란 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다.

함수도 객체이므로 값으로 사용할 수 있다. 즉 변수나 객체, 배열 등에 저장 할 수 있으며, 함수의 매개변수(parameter)나 반환값으로도 사용된다.

 

고차함수 (HOF, higher-order function)

매개변수로 함수를 전달받고 결과로 함수를 반환하는 함수이다. 다시 말해, 고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 고차함수는 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

 

HOF는 주로 배열에서 많이 사용된다. HOF가 사용되는 가장 흔한 경우는 다음과 같다.

Array.filter 는 필터링에 사용할 함수를 전달받아 값의 필터를 거쳐 새로운 배열을 반환하는 함수이다. 즉 함수를 매개변수로 사용하는 sort나 filter, forEach, map, reduce...와 같은 API들은 HOF를 사용한 것이다.

만약 HOF가 불가능했다면(함수를 인자로 전달하지 못한다면) 다음과 같이 작성해야 했을 것이다. 

 

이 방법은 전통적인(?) 방법으로 객체지향 프로그래밍이라 한다.

객체 지향 프로그래밍이란 컴퓨터 프로그래밍의 패러다임 중 하나로, 프로그래밍에 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만드고, 그 객체들 간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

객체지향 프로그래밍은 어떻게 명령을 수행할 것인가에 초점을 맞춘다. 알고리즘을 명시하기 때문에, 무엇을 수행하는 코드인지 해석해야한다. 반면에 함수형 프로그래밍은 무엇을 수행할 것인가에 초점을 맞춘다. 알고리즘은 명시하지 않고, 무엇을 수행하는지를 명시하기 때문에, 코드가 좀더 명시적이라 할 수 있다.

 

객체지향 프로그래밍에 관한건 참고 링크를 타고 들어가서 살펴보는 것을 추천한다.

 

어쨌든 함수형 프로그래밍이 좀 더 명시적이고 코드가 간결하다.

이외에도 HOF의 장점은 기능을 추가하는 코드를 코드를 재사용 할 수 있다.

왼쪽은 HOF를 사용하지 않은 코드이고, 오른쪽은 HOF를 사용한 코드이다. 워낙 간단한 코드여서 큰 차별성이 없어보이지만 코드가 복잡해질 수록 많은 양의 중복코드를 제거할 수 있다.

 

HOF를 사용하지 않는 경우, 3이나 5를 더하는 함수를 직접 만들어야한다. 미미하지만 중복된 코드가 있다.

하지만 HOF인 partial(함수add를 인자로받아 함수 add3을 반환하는 함수)을 사용하면, 첫번째 인자값이 고정된 경우 뒤에 더해주는 값을 다르게 만들 수 있다.

 

화살표함수와 똑같은 코드. 

 

좀더 유용한 HOF 함수를 만들어보자. 클로저를 이용하면 내부상태를 갖는 함수를 만드 수 있따. 함수의 반환값을 0부터 계속 누적시켜서 적용된 값을 반환하는 HOF를 만들어보자.

 

함수형 프로그래밍은 기본적으로 작은 단위의 함수를 만들고 이들을 조합해 가면서 프로그램을 만들어나가는 방식을 취한다. HOF는 이러한 기능 단위의 함수들을 조합해서 재사용할 수 있는 하나의 패턴을 제공함으로써 함수형 프로그래밍에서 아주 중요한 역할을 하고 있다.

 

HOF에서 좀더 확장?된 개념으로는 리액트의 HOC(다른컴포넌트를 생산해내는 컴포넌트)가 있다.

(이 포스팅들의 시작은 HOC 였다. HOC 찾아보다가 스코프, 클로저부터 HOF까지 개념정리 했네 하하)

 

참고
- 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
- https://meetup.toast.com/posts/137
- https://poiemaweb.com/js-array-higher-order-function
- https://blog.metafor.kr/141