Javascript에서 compose() 및 pipe()를 만드는 방법

안녕하세요,
복잡한 기능을 구축하는 동안 가장 많이 발생하는 상황은 함수에 값을 전달해야 하고 반환(결과) 값이 다른 함수에 대한 입력이 필요한 경우입니다. 함수가 2~3개 있으면 괜찮은 것처럼 들릴 수 있지만 그보다 많으면 코드가 지저분해지고 읽을 수 없게 됩니다. 이 문제를 해결하기 위해 여기에 함수 구성이 있습니다.

각 함수의 출력이 다음 함수로 전달되고 마지막 함수의 출력이 최종 결과가 되는 함수 결합 메커니즘입니다. JavaScript뿐만 아니라 모든 프로그래밍 언어에 적용 가능합니다.

두 가지 방법으로 할 수 있습니다. 그러나 명심해야 할 한 가지는 시퀀스가 ​​중요하며 최종 결과가 변경된다는 것입니다.

구성하다

실행을 위해 함수를 오른쪽에서 왼쪽 순서로 전달합니다. 예 (f4,f3,f2,f1 )

//Compose function using reduceRight()
const compose = (...args) => (value) => args.reduceRight((prev, fn) => fn(prev), value);
// Increment the passed value by 2
const increment = (n) => n + 2;
// Triples the passed value
const double = (n) => n * 3;
//Divide it by 2
const divide = (n) => n / 2;
// Using our composition function
console.log(compose(divide, double, increment)(2));  // 6

파이프

실행을 위해 함수를 왼쪽에서 오른쪽 순서로 전달합니다. 예 (f1,f2,f3,f4 )

//pipe function using reduce(), default left to right execution
const pipe = (...args) => (value) => args.reduce((prev, fn) => fn(prev), value);
// Increment the passed value by 2
const increment = (n) => n + 2;
// Triples the passed value
const double = (n) => n * 3;
//Divide it by 2
const divide = (n) => n / 2;
// Using our pipe function
console.log(pipe(increment, double, divide)(3));  // 7.5

팁: 이미 언급했듯이 순서가 중요하므로 작성 함수만 만들고 함수를 왼쪽에서 오른쪽 순서로 전달하여 파이프로 사용할 수 있습니다.

읽어 주셔서 감사합니다.