일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- Carousel
- CustomHook
- accordian
- ignore padding
- useQueryClient
- 리액트
- 부모패딩
- vite
- createPortal
- 문제해결
- 함수형프로그래밍
- es6
- 서초구보건소 #무료CPR교육
- ㅡ
- ?? #null병합연산자
- 조건부스타일
- BFC
- transition
- BlockFormattingContext
- 제어컴포넌트
- react
- QueryClient
- twoarrow
- tailwindCSS
- DOM
- parent padding
- debouncing
- 부모요소의 패딩 무시
- 화살표2개
- alias설정
Archives
- Today
- Total
프론트엔드 첫걸음
함수형 프로그래밍 pipe 본문
https://medium.com/free-code-camp/pipe-and-compose-in-javascript-5b04004ac937
- 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.
'개발 공부 > Javascript' 카테고리의 다른 글
함수형 프로그래밍 - 화살표 2개 함수 이해하기 (0) | 2023.03.24 |
---|---|
함수에 매개변수로 들어가 있는 ...은 rest parameter (0) | 2023.03.24 |
createDocumentFragment (0) | 2023.02.04 |
css filter를 사용한 색상 반전 모드 (0) | 2023.01.29 |
카드 스크롤 애니메이션 1 - (카드 슬라이딩 + 플립) (1) | 2023.01.20 |