Use function composition in JavaScript 자바스크립트 함수 컴포지션 사용

전제 조건 :이 게시물에서 currying(커링)을 사용하므로 이에 대해 모르는 경우 이전 게시물 인 Javascript의 Currying을 읽어 보시기 바랍니다.

함수 컴포지션이란 무엇입니까?

함수 컴포지션은 여러 간단한 함수를 결합하여 더 복잡한 함수를 만드는 메커니즘입니다. 각 함수의 결과는 다음 함수로 전달됩니다. 수학에서 우리는 종종 다음과 같이 씁니다 : f(g(x)). 이것은 f로 전달 된 g(x)의 결과입니다. 프로그래밍에서 비슷한 것을 쓰면서 그 컴포지션을 달성할 수 있습니다.
간단한 예를 들어 봅시다. 2 + 3 * 5 연산을 수행하여 산술을해야한다고 가정합시다. 아시다시피 곱셈은 덧셈보다 우선입니다. 따라서 3 * 5를 계산 한 다음 결과에 2를 추가하면됩니다. 이것을 JavaScript로 작성해 봅시다. 기본적이고 가장 간단한 방법은 다음과 같습니다.

const add = (a, b) => a + b;
const mult = (a, b) => a * b;
add(2, mult(3, 5))

이것은 add함수에 전달 된 곱셈의 결과이기 때문에 함수 컴포지션의 한 형태입니다.
한 걸음 더 나아가서 함수 컴포지션이 매우 유용할 수 있는 다른 사례를 보도록 합시다. 이제, 사용자 목록을 가지고 있고 그중에서 모든 성인인 사용자의 이름을 추출해야 한다고 가정해봅시다. 나는 개인적으로 다음과 같이 쓸 것입니다.

const users = [
  { name: "Jeff", age: 14 },
  { name: "Jack", age: 18 }, 
  { name: "Milady", age: 22 },
]
const filter = (cb, arr) => arr.filter(cb);
const map = (cb, arr) => arr.map(cb);

map(u => u.name, filter(u => u.age >= 18, users)); //["Jack", "Milady"]

좋은 방법이지만, 컴포지션을 자동화하면 더 좋을 수 있습니다. 적어도 더 읽기 쉬울 수 있습니다.

함수 컴포지션 자동화

따라서 이 섹션의 목표는 둘 이상의 함수를 가져와서 compose고차 함수를 생성하는 것입니다. 미래 함수의 최종 서명을 정의해 봅시다 :

compose(function1, function2, ... , functionN): Function

예를 들어 다음과 같이 함수를 호출하려고합니다.

compose(add1, add2)(3) //6  

따라서 이러한 함수의 구현은 다음과 같습니다.

const compose = (...functions) => args => functions.reduceRight((arg, fn) => fn(arg), args);

굉장하지 않습니까?
이 단 한 줄의 함수만으로 복잡한 변환을 작성할 수 있는 함수를 구성할 수 있습니다. 여기서 일어나는 일을 설명하겠습니다.

• compose는 고차 함수입니다. 다른 함수를 반환하는 함수입니다.

• compose는 여러 함수를 인수로 취해서 spread opeartor:...를 사용하여 함수의 배열로 변환합니다.

• 그런 다음 해당 함수에 간단히 reduceRight를 적용합니다. 콜백의 첫 번째 매개 변수는 현재 인수입니다. 두 번째 인수는 현재 함수입니다. 그런 다음 현재 인수로 각 함수를 호출하고 결과는 다음 호출에 사용됩니다.

이제 이전 예제에서 우리는 이 함수를 사용할 수 있습니다. 더 읽기 쉽게 map과 filter 기능을 정리했습니다.

const filter = cb => arr => arr.filter(cb);
const map = cb => arr => arr.map(cb);

compose(
  map(u => u.name),
  filter(u => u.age >= 18)
)(users) //["Jack", "Milady"]

마지막 예제를 제안합니다. 전통적인 MapReduce를 구현해 봅시다.

함수 컴포지션을 가진 MapReduce

MapReduce의 원리는 간단합니다. 데이터 셋에 맵을 적용하고 결과를 줄여 단일 결과를 생성합니다. 이것이 일반적으로 함수 컴포지션의 원리입니다. 예를 들어, 우리는 여러 단어들을 세기 위해 전통적 단어 카운터를 구현할 수 있습니다. map은 값을 만나면 1을 보내야하며 reduce는 최종 배열을 요약하여 결과를 생성합니다.

const reduce = cb => arr => arr.reduce(cb); //Just currify the reduce function

const mapWords = map(() => 1);
const reduceWords = reduce((acc, curr) => acc += curr)(0)

compose(reduceWords, mapWords)(['foo', 'bar', 'baz']); //3

Pipe or composition?(파이프 혹은 컴포지션)

Yeiner Cano가 먼저 compose대신 pipe로 구현했다고 언급 한 이후이 부분을 추가했습니다. 이 기사 바로 아래에서 그의 의견을 읽을 수 있습니다.

따라서 compose와 pipe의 주요 차이점은 컴포지션 순서입니다. Pipe는 왼쪽에서 오른쪽으로 컴포지션을 수행하며 Compose는 오른쪽에서 왼쪽으로 함수 컴포지션을 수행합니다. pipe 고차 함수를 작성해 봅시다 :

const pipe = (...functions) => args => functions.reduce((arg, fn) => fn(arg), args);

따라서 이 경우 reduceRight대신 reduce를 사용하여 컴포지션을 왼쪽에서 오른쪽으로 수행합니다. 그런 다음 새로 만든 함수를 이전 예제에 적용 할 수 있습니다.

pipe(
  filter(u => u.age >= 18),
  map(u => u.name),
)(users) //["Jack", "Milady"]

pipe(mapWords, reduceWords)(['foo', 'bar', 'baz']);

어떤 사람들은 compose보다 pipe를 사용하는 것이 더 읽기 쉽습니다. 적어도 우리는 더 자연스럽다는 것에 동의 할 수 있습니다!

결론

이 예제는 사소한 예이지만 더 복잡한 예제에서도 사용할 수 있습니다. compose함수는 lodash 또는 ramda와 같은 가장 기능적인 라이브러리에서 구현됩니다. 함수 컴포지션에 대한 변형을 찾을 수도 있습니다. 예를 들어 Ramda는 promises를 리턴하는 함수를 작성할 수있는composeP 함수를 제안합니다. http://ramdajs.com/docs/#composeP

번역 주소 : https://www.codementor.io/michelre/use-function-composition-in-javascript-gkmxos5mj