프론트엔드 첫걸음

함수형 프로그래밍 - 화살표 2개 함수 이해하기 본문

개발 공부/Javascript

함수형 프로그래밍 - 화살표 2개 함수 이해하기

차정 2023. 3. 24. 14:37

함수와 변수 x를 받아서 함수에 변수 x 를 넣은 값을 반환하는 함수 fnc1 가 있다고하자.

const fnc1 = (paraFnc, x) => paraFnc(x);

 

이것을 화살표 함수 2 개를 쓴 함수로 바꿔서 사용할 수 있다.

const fnc2 = (paraFnc) => x => paraFnc(x);

 

왜냐면 이 화살표 2개짜리 함수는 아래의 함수와 같기 때문이다. 

function fnc3 (paraFnc) {
  return function(x) {
     return paraFnc(x)
  }
}

//fnc3 함수는 paraFnc함수를 받아서,
// x를 받아 paraFn(x)를 반환하는 익명함수를 반환한다.

 

테스트 결과는 다음과 같다.

//파라미터로 들어갈 함수 
const double = x => x * 2


//fnc1 
fnc1(double , 3) //6

//fnc2 
fnc2(double)(3)  //6

//fnc3
fnc3(double)(3)  //6

 

 

코드펜에서 코드로 확인하면 쉽게 이해할 수 있다.
이제 pipe함수를 이해할 준비가 되었다!

https://fe-j.tistory.com/entry/함수형-프로그래밍-pipe

 

함수형 프로그래밍 pipe

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 s

fe-j.tistory.com

 

 

 

 

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

 

 

 

 
 
 
 
 

'개발 공부 > Javascript' 카테고리의 다른 글

URLSearchParams, URL 차이  (0) 2024.02.02
getElementById 생략  (0) 2023.11.02
함수에 매개변수로 들어가 있는 ...은 rest parameter  (0) 2023.03.24
함수형 프로그래밍 pipe  (0) 2023.03.24
createDocumentFragment  (0) 2023.02.04