All Articles

reduce를 이용한 유용한 함수, 자바스크립트 pipeline에 대해 알아보자!

image.png

pipeline

아마 함수형 프로그래밍에서 나온 개념일듯..?! 인자로 받은 함수들을 순차적으로 실행시키는 함수를 말한다.

이렇게만 말하면 뭔지 이해가 잘 안가니 예시를 들어보자!

const getName = (person) => person.name
console.log(getName({name: 'whatispipeline'}))

const uppercase = string => string.toUpperCase();
console.log(uppercase('whatispipeline'))

위와 같이 getName이라는 함수와 uppercase라는 함수가 있다. 이를 동시에 실행시키려면 uppercase와 getName함수를 같이 실행시키는 방법이 있다.

uppercase(getName({name:'whatispipeline'})) 요렇게!

근데 여기에 함수를 두 개 더 추가하면 어떻게 될까?

const reverse = str => str.split('').reverse().join('')
console.log(reverse('whatispipeline'))

const get6Char = string => string.substring(0,6)
console.log(get6Char('whatispipeline'))

이 함수들을 동시에 실행시켜 본다면..? reverse(get6Char(uppercase(getName({ name: 'whatispipeline' }))))

식이 너무 지저분해 보인다… 코드의 가독성을 위해 pipeline을 적용해보자. pipe함수는 전역에 저장되어 있는 메소드가 아니기 때문에 선언을 먼저 해줘야 한다.

pipe함수 선언

const pipe = (...funcs) => x => funcs.reduce((v,f)=> f(v),x)

reduce에 인자로 두 개의 값이 들어가는데, v는 currentValue이고, f는 currentFunction이다. 정의된 함수에 현재의 값을 넣고, 마지막 인자로는 원래 함수들에 들어갈 인자를 적어주었다.

이제 pipe에 함수들을 넣어주기만 하면 된다.

pipe(
getName,
uppercase,
get6Char, reverse)({name:'whatispipeline'})

아까 위에서 썼던 코드보단 뭔가 더 정돈된 느낌이다. 일단 보기 깔끔하다!

pipe말고도 compose라는 것도 있는데, reduceRight메소드를 이용한다. reduce는 들어봤어도 reduceRight은 생전 처음 보는데 와.. 앞으로 공부할 것들이 정말 많구나 하는걸 오늘 또 새삼 느낀다.
reduceRight이 궁금한 사람들은 MDN문서를 참고하시길!!

compose함수 선언

const compose = (...fns) => x => fns.reduceRight((v,f)=>f(v),x)

pipe를 선언해줬던 것과 동일하게 compose 함수를 선언해준다. 여기서 주의할점은 reduceRight은 오른쪽에서 왼쪽으로 reduce를 실행시키기 때문에 인자들의 순서를 pipe와는 반대로 써주어야 한다.

compose(
  reverse,
  get6Char,
  uppercase, getName)({name:'whatispipeline'})

콘솔을 찍어보면 아까와 동일한 결과가 나온다.
pipe든 compose든 아직은 어떤 곳에다가 적용을 해야할지 잘 모르겠으나.. 일단 정리해놓으면 언젠간 쓰겠지?

Reference