JavaScript에서 pipe () 및 compose ()에 대한 빠른 소개

함수형 프로그래밍은 저에게 눈길을 끄는 여정이었습니다. 이 게시물과 같은 게시물은 새로운 기능적 프로그래밍 영역을 여행하면서 통찰력과 관점을 공유하려는 시도입니다.

Ramda는 JavaScript로 함수형 프로그래밍을 훨씬 쉽게하기 때문에 FP 라이브러리로 이동했습니다. 나는 그것을 강력히 추천합니다.

블록을 구성하여 구조를 형성합니다. 꽤 깊은 것들…

파이프

파이프의 개념은 간단합니다. n 개의 기능을 결합한 것입니다. 왼쪽에서 오른쪽으로 흐르는 파이프이며 마지막 함수의 출력으로 각 함수를 호출합니다.

누군가의 이름을 반환하는 함수를 작성해 봅시다.

getName = (사람) => person.name
getName ({이름 : 'Buckethead'})
// '버킷 헤드'

문자열을 대문자로하는 함수를 작성해 봅시다.

대문자 = (문자열) => string.toUpperCase ()
대문자 ( 'Buckethead')
// 'BUCKETHEAD'

따라서 사람의 이름을 얻고 대문자로 바꾸려면 다음과 같이하십시오.

name = getName ({이름 : 'Buckethead'})
대문자 (이름)
// 'BUCKETHEAD'

괜찮지 만 중간 변수 이름을 제거하겠습니다.

대문자 (getName ({name : 'Buckethead'}))

더 낫지 만 나는 그 둥지를 좋아하지 않습니다. 너무 혼잡해질 수 있습니다. 문자열의 처음 6자를 얻는 함수를 추가하려면 어떻게해야합니까?

get6Characters = (문자열) => string.substring (0, 6)
get6Characters ( 'Buckethead')
// '버킷'

를 야기하는:

get6Characters (대문자 (getName ({이름 : 'Buckethead'})))
'버킷'

정말 미쳐서 문자열을 뒤집는 기능을 추가합시다.

반전 = (문자열) => 문자열
  .스플릿('')
  .역()
  .붙다('')
reverse ( 'Buckethead')
// 'daehtekcuB'

이제 우리는 :

reverse (get6Characters (대문자 (getName ({name : 'Buckethead'}))))
// 'TEKCUB'

조금 얻을 수 있습니다 ... 많은.

구조에 파이프!

함수 내에서 함수를 방해하거나 여러 가지 중간 변수를 만드는 대신 모든 것을 파이프하겠습니다!

파이프(
  getName,
  대문자
  get6 문자,
  역
) ({이름 : 'Buckethead'})
// 'TEKCUB'

순수한 예술. 할 일 목록과 같습니다!

단계별로 살펴 보겠습니다.

데모 목적으로 Eric Elliott의 기능적 프로그래밍 기사 중 하나에서 파이프 구현을 사용합니다.

파이프 = (... fns) => x => fns.reduce ((v, f) => f (v), x)

나는이 작은 라이너를 좋아합니다.

나머지 매개 변수를 사용하여 내 기사를 참조하여 n 함수를 파이프 할 수 있습니다. 각 함수는 이전 함수의 출력을 가져와 을 단일 값으로 줄입니다.

그리고 우리가 위에서했던 것처럼 그것을 사용할 수 있습니다.

파이프(
  getName,
  대문자
  get6 문자,
  역
) ({이름 : 'Buckethead'})
// 'TEKCUB'

파이프를 확장하고 디버거 문을 추가하면 한 줄씩 진행하겠습니다.

파이프 = (... 함수) => (값) => {
  디버거;
  리턴 함수
    .reduce ((currentValue, currentFunction) => {
       디버거;
       return currentFunction (currentValue);
    }, 가치)
}

우리의 예와 함께 파이프를 호출하고 불가사의를 전개 시키십시오.

지역 변수를 확인하십시오. 함수는 4 가지 함수의 배열이며 값은 {name : 'Buckethead'}입니다.

우리는 rest 매개 변수를 사용했기 때문에 (내 기사 참조) 파이프는 많은 수의 기능을 사용할 수 있습니다. 반복해서 호출합니다.

다음 디버거에서 우리는 내부에 있습니다. 여기서 currentValue가 currentFunction에 전달되어 리턴됩니다.

currentFunction은 객체의 .name 속성을 반환하기 때문에 결과가 'Buckethead'입니다. 그것은 reduce로 리턴 될 것이며, 이는 다음에 새로운 currentValue가된다는 것을 의미합니다. 다음 디버거를 치고 봅시다.

currentValue는‘Buckethead’입니다. 지난 번 반환 된 것이기 때문입니다. currentFunction은 대문자이므로 'BUCKETHEAD'는 다음 currentValue가됩니다.

같은 생각으로‘BUCKETHEAD’의 처음 6자를 뽑아서 다음 기능으로 넘깁니다.

reverse (‘. aedi emaS’)

그리고 끝났어요!

compose ()는 어떻습니까?

다른 방향으로 만 파이프입니다.

따라서 위의 파이프와 동일한 결과를 원한다면 반대의 결과를 얻을 수 있습니다.

짓다(
  역,
  get6 문자,
  대문자
  getName,
) ({이름 : 'Buckethead'})

getName이 체인에서 마지막이고 역방향이 첫 번째 인 방법에 주목하십시오.

다음은 동일한 기사에서 Magical Eric Elliott가 다시 작성하여 작성하는 빠른 구현입니다.

작성 = (... fns) => x => fns.reduceRight ((v, f) => f (v), x);

디버거를 사용하여이 기능을 확장 해 나가겠습니다. 그것을 가지고 놀아 사용하고 고마워하십시오. 그리고 가장 중요한 것은 재미있게 보내십시오!

다음 시간까지!

조심해
야 제드 바자 도우