일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- vite
- transition
- ignore padding
- BFC
- QueryClient
- twoarrow
- 화살표2개
- CustomHook
- 부모패딩
- parent padding
- 부모요소의 패딩 무시
- 서초구보건소 #무료CPR교육
- 조건부스타일
- alias설정
- 문제해결
- createPortal
- 리액트
- debouncing
- tailwindCSS
- ?? #null병합연산자
- ㅡ
- Carousel
- useQueryClient
- react
- accordian
- 함수형프로그래밍
- DOM
- BlockFormattingContext
- 제어컴포넌트
- es6
Archives
- Today
- Total
프론트엔드 첫걸음
함수형 프로그래밍 - 화살표 2개 함수 이해하기 본문
함수와 변수 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
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 |