-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8aea107
commit 01cb5c8
Showing
1 changed file
with
107 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
# 함수형 도구 체이닝 | ||
|
||
> 체인 = 여러 단계를 하나로 엮어 복합적 계산을 표현하는 방법 (= 조합) | ||
> 함수형 도구를 조합하는 법 | ||
> 복잡한 반복문을 함수형 도구 체인으로 해결 | ||
> 체인을 통한 파이프라인 만들어 작업을 수행 | ||
1. 과정을 여러 단계로 나눈다. => 간결하고 명확히 분리 | ||
|
||
- 우수고객 찾기 = filter | ||
- 가장 비싼구매 금액 리스트로 변환 = map | ||
- 가장 비싼구매 찾기 = reduce | ||
|
||
**max 보다 maxKey가 일반적일까?** | ||
|
||
1. maxKey로 max를 만들 수 있기에 저수준에 있다. | ||
|
||
```js | ||
const maxKey = (array, max, selectKey) => reduce(array, max, (acc, item) => | ||
return acc < selectKey(item) ? selectKey(item) : acc; | ||
) | ||
|
||
const max = maxKey(array, max, (item) => item); | ||
``` | ||
|
||
2-1. 단계에 이름 붙이기 | ||
|
||
- const 우수고객찾기 = selectBestCustomers | ||
- const 가장비싼구매금액리스트로 = getBigPricesByCustomer => 가장비싼구매찾기 | ||
- const 가장비싼구매찾기 = reduce = getMaxPrices | ||
|
||
```js | ||
const 우수고객들의_가장_비싼구매_리스트 = (customers) => { | ||
const 우수고객 = 우수고객찾기(customers); | ||
const 가장비싼구매 = 가장비싼구매금액리스트로(customers); | ||
|
||
return 가장비싼구매; | ||
}; | ||
``` | ||
|
||
2-2. 콜백에 이름 붙이기 | ||
|
||
- const 우수고객이니 = (customer) => customer.purchases.lenght > 3; | ||
- const 가장비싼구매구하기 = (customer) => maxKey(customer.purchases, {total: 0}, 구매속성반환); | ||
- const 구매속성반환 = customer => getPurchaseTotal(customer.purchase) | ||
|
||
```js | ||
const 우수고객들의_가장_비싼구매_리스트 = (customers) => { | ||
const 우수고객들 = filter(customers, 우수고객이니); | ||
const 가장비싼구매 = map(우수고객들, 가장비싼구매구하기); | ||
|
||
return 가장비싼구매; | ||
}; | ||
``` | ||
|
||
**2-2 콜백에 이름 붙이기가 일반적으로 더 명확.** | ||
함수를 그대로 쓰는것보다 함수형 도구에 콜백에 이름을 붙이는것이 더 명확해 보이며, 단계가 중첩되는것도 막을 수 있음. | ||
|
||
### 스트림 결합 | ||
|
||
map, filter, reduce는 쉽게 최적화해 반복문의 횟수를 줄일 수 있음. | ||
|
||
1. map.map은 하나의 map으로 표현 가능 | ||
2. filter.filter는 하나의 filter으로 표현 가능 | ||
3. map.reduce는 reduce하나로 사용 가능 | ||
|
||
**이것은 최적화임으로 병목이 생겼을 경우 유용하다** | ||
**따라서 대부분의 경우 여러 단계를 나누어서 사용하는것이 명화하고 읽기 쉽다.** | ||
|
||
### 기족의 반복문 함수형 도국로 리팩터링 | ||
|
||
1. 이해하고 다시 만들기 = 반복문이 어떤일을 하는가 파악하며, 다시 만들기 | ||
2. 단서를 찾아 리팩터링 = 값을 누적하는지, 새로운 함수를 반환하는지, 배열에서 값을 선택하는지 찾기, 데이터 찾기... | ||
|
||
### 단서를 찾아 리팩터링 | ||
|
||
1. `데이터 만들기` => 특정 범위를 파악하고 새로운 배열로 만들기 | ||
2. `한번에 전체 배열을 조작하기` => `데이터 만들기`를 통한 배열을 전체 순회 및 조작 | ||
3. `작은 단계로 나누기` => map, filter, reduce등으로 단계를 구현 ex) max, min, average | ||
|
||
- 조건문은 filter로 | ||
- 유용한 함수로 추출 = range | ||
|
||
**호출 그래프 다시 살펴보기** | ||
|
||
```js | ||
const range = (start, end) => { | ||
return new Array(end - start).fill(null).map((_, i) => i); | ||
}; | ||
``` | ||
|
||
### 체이닝 디버깅하기 | ||
|
||
- 구체적인 것을 유지하기 = 각 단계의 이름을 알기 쉽고 명화하게 짓기(callback 이름, 인자 이름) | ||
- 출력해보기 | ||
- 타입을 따라가기 = map의 새로운 배열의 타입, reduce의 초기값 | ||
|
||
**함수형 인터페이스 (자바)** | ||
|
||
- Function: 인자하나와 리턴값을 갖는 값 = map callback | ||
- Predicate: 인자하나와 boolean값 리턴 = filter callback | ||
- BiFunction: 인자 두개와 리턴값 = reduce callback | ||
- consumer: 인자 하나를 받고 리턴값 없음 = forEach callback | ||
|
||
### 결론 | ||
|
||
- 함수형 도구는 체이닝을 통해 복잡한 계산을 명확한 단계로 표현 가능 map.filter.reduce.map... |