반응형
map
var names = map(customer, getFullName);
var namesLengths = map(names, stringLength);
//위와 아래는 같은 동작을 한다.
var nameLangths = map(customer, function(customer) {
return stringLength(getFullName(customer));
});
filter
var goodCustomer = filter(customer, isGoodCustomer)
var withAddress = filter(goodCustomers, hasAddress)
//위와 아래는 같은 동작을 한다.
var withAddress = filter(customers, function(customer){
return isGoodCustomer(customer) && hasAddress(customer);
}});
reduce
var purchaseTotals = map(purchases, getPurchaseTotal);
var purchaseSum = reduce(purchaseTotals, 0 , plus);
//위와 아래는 같은 동작을 한다.
var purchaseSum = reduce(purchases,0 function (total, purchase) {
return total + getPurchaseTotal(purchase);
});
→ 셋다 가지비 컬렉션을 적게한다. 최적화를 한 것이고, 병목현상이 생겼을때만 사용하면 좋다.
리팩터링
- 데이터 만들기
- 배열 일부에 대해 동작하는 반복문이 있다면 배열 일부를 새로운 배열로 나눌 수 있다.
- 한번에 전체 배열을 조작하기
- 어떻게 하면 반복문을 대신해 전체 배열을 한번에 처리할 수 있을지 생각해보자
- map은 항목을 변환하고 filter()는 항목을 없애거나 유지한다. reducer()는 항목을 하나로 합친다.
- 작은 단계로 나누기 (p336)
- 알고리즘이 너무 많은일을 한다고 생각하면 2개 이상의 단계로 나눠보자
** 반복문 안에 있는 조건은 filter로 바꿔보자
다양한 함수형 도구
- pluck : 특정 필드 값을 가져오게한ㄷ.
- concat : 배열안에 배열을 뺄 수 있다.
- frequenciesBy / groupBy : 개수를 세기 / 그룹핑하기
reduce()
값을 요약하는 용도 외의 다양한 사용법이 있다. (p345)
객체를 다루기 위한 고차함수
중복 된 값을 고차함수로 합치고, 동작을 콜백으로 전달 할 수 있게 바꾼다.
리펙토링 방법
- 암묵적 인자 드러내기
- 함수 이름에 있는 암묵적 인자를 확인한다
- 명시적 인자를 추가한다.
- 함수 본문에 하드코딩된 값을 새로운 인자로 바꾼다.
- 함수를 호출하는 곳을 고친다.
- 함수 본문을 콜백으로 바꾸기
재귀함수
- 중첩된 데이터가 있다면 재귀함수로 바꿔서 처리할 수 있다.
재귀함수를 안전하게 사용하기
- 종료 조건이 있어야한다.
- 최소 하나의 재귀호출이 있어야한다.
- 종료조건에 다가가야 한다.
** 반복문 보다 재귀함수가 적합한 이유는 중첩된 데이터에 대한 데이터 구조를 그대로 반영하기 때문이다.
앞에서 배운 고차함수
- 배열을 반복할때 for 반복문 대신 사용
- 중첩된 데이터를 효율적으로 다루기
- 카피-온-라이트 원칙 적용
- try/catch로깅 규칙을 코드화
반응형
'BOOKS' 카테고리의 다른 글
HTTP 캐시 (0) | 2023.09.27 |
---|---|
[실전에서 바로쓰는 Next.js] Next.js 기초와 내장 컴포넌트 (0) | 2023.05.10 |
[실전에서 바로쓰는 Next.js] 렌더링 전략 (0) | 2023.05.05 |
[웹 성능 최적화 기법]웹에서 가속을 끌어내는 방법 (0) | 2023.04.10 |
[웹 성능 최적화 기법]웹 사이트 개선 방법 (0) | 2023.03.01 |