프론트엔드 첫걸음

함수형 프로그래밍 pipe 본문

개발 공부/Javascript

함수형 프로그래밍 pipe

차정 2023. 3. 24. 11:31

https://medium.com/free-code-camp/pipe-and-compose-in-javascript-5b04004ac937

 

A quick introduction to pipe() and compose() in JavaScript

Functional programming’s been quite the eye-opening journey for me. This post, and posts like it, are an attempt to share my insights and…

medium.com

 

  • arrow 함수와 rest parameter, reduce 함수를 이해한 상태이면 아래와 같은 compose 함수를 이해할 수 있다.
// 함수들과 x를 받아서 차례로 함수들에 결과를 대입하게 하는 함수.
// reduceRight를 사용하여 오른쪽에서 왼쪽으로 누적해서 계산한다.
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x)

 

//위 함수는 아래와 같다 (긁어서 테스트해보시라)
function compose (...fns) {   //함수를 받고
	return function(x) {      // 또 x 를 받아서 
      return fns.reduceRight((v, f) => f(v), x) // x를 초기값으로 오른쪽함수부터 대입하고 대입하는 reduceRight진행 
    }
}

const double = x => x*2 
const add1 = x => x+1

compose(double, add1)(100) // 202

 

 

  • 같은 원리로 오른쪽부터 누적하는 pipe함수도 사용할 수 있다.
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x)

double = (x) => x * 2
add1 = (x) => x + 1
pipe(double, add1)(100) // 201

 

 

rest parameter

https://fe-j.tistory.com/entry/함수에-매개변수로-들어가-있는-은-rest-parameter

화살표 2개 함수

https://fe-j.tistory.com/entry/당신은-이-글을-본-순간-화살표-2개-함수를-이해할-수-있게-되고

 

 

이것을 이해하기 위해 내가 참고한 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight



 

See the Pen 매개변수 2번받을래 아니면 화살표 2개써서 쓸래 by JEONG (@cona) on CodePen.