Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 큰돌의 CS책
- 출처 : 한입크기로 잘라먹는 타입스크립트
- 쏙쏙들어오는함수형코딩
- 갈길이 멀구나
- 함수형 코딩
- 쏙쏙 들어오는 함수형코딩
- 생코님Redux
- 에릭 노이먼
- 클린코드다시읽기
- 흥달쌤
- 로버트 C마틴
- 출처 : https://www.boostcourse.org/
- 쏙쏙 들어오는 함수형 코딩
- 출처는 코딩애플
- 고등애플
- 이웅모
- 출처 : 자바스크립트 딥다이브
- 나는 flux좋아...
- 유틸리티타입은 공식문서 자주 보자
- 쏙속 들어오는 함수형코딩
- https://product.kyobobook.co.kr/detail/S000001952246
- 출처 : 코딩앙마
- 오종택개발자님
- 에릭 노먼드
- 출처 : 코딩애플
- 자바스크립트 딥다이브
- 김영한쌤
- 리엑트를 다루는 기술
- 출처는 코딩앙마
- 에릭노이먼
Archives
- Today
- Total
틈틈히 메모중
[함수형 코딩#12~#13] 함수형 반복 / 체이닝 본문
##이번장의 핵심 내용 : 배열을 다루기 위한 함수형 도구 알아보기
1. 함수형 도구 : map();
[1,2,3,4,5].map((item) => { //여기서 사용한 콜백함수를 "사용할 곳에서 바로 정의한 익명함수(=인라인함수)"
return item + 1;
})
//[2, 3, 4, 5, 6]
ㄴ 배열에 null이나 undefined를 미리 거르고 싶은데 map()은 그게 안되네 => filter()를 쓰자
2. 함수형 도구 : filter();
[1,2,3, null, undefined, 4,5].filter(item => item !== null && item !== undefined)
//filter함수 안에 '술어(true, false를 리턴하는 함수)'를 넣음
// [1, 2, 3, 4, 5]
3. 함수형 도구 : reduce();
arr.reduce((accumulator, currentValue, currentIndex, array)=>{ }, initialValue)
//1. accumulator : 콜백의 반환값을 누적. 콜백의 이전 반환값
//2. currentValue : 처리할 현재 요소
//3. currentIndex(Optional) : 처리할 현재 요소의 인덱스
//(initialValue를 제공한 경우 0, 아니면 1부터 시작)
//4. array(Optional) : reduce()를 호출한 배열
//5. initialValue(Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값.
//초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용.
//빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생함.
//reduce의 반환 값 = 누적 계산의 결과 값.
let arr = [1,2,3,4,5,6,7,8,9,10];
//등차수열 합
arr.reduce((acc, curr, currentIndex, array) => {
return acc + curr;
}, 0);
//등차수열의 곱
arr.reduce((acc, curr, currentIndex, array) => {
return acc * curr;
}, 1);
//최대값 리턴
arr.reduce((acc, cur) => acc > cur ? acc : cur);
//최소값 리턴
arr.reduce((acc, cur) => acc < cur ? acc : cur);
자세한 배열메서드는 예전에 정리한 글 참고
https://jireh-muze.tistory.com/m/23
체인을 명확하게 하기
1. 단계에 이름 붙이기(고차함수의 이름을 잘짓자)
2. 콜백에 이름 붙이기(콜백함수를 인라인으로 하지말고 재사용할수 있도록 빼내서 쓰기)
=> 책에서는 1번보다는 2번 권장
개인적 생각...
코테 할 때 체이닝 진짜 많이 하는데... 난 가독성 괜찮았는데...
[3,2,null,10,4,undefined,25]
.filter(item => item !== null && item !== undefined)
.sort((a, b) => a - b)
// [2, 3, 4, 10, 25]
filter()값 리턴하는 함수, map()돌리는 함수 따로 다 만들어야할지 의문...
리턴값도 계속 생기는데...라고 생각
let arr = [3,2,null,10,4,undefined,25]
function filtering(array){
return array.filter(item => item !== null && item !== undefined);
}
function ascendingOrder(array){
return array.sort((a, b) => a - b);
}
ascendingOrder(filtering(arr));
// [2, 3, 4, 10, 25]
근데 책에서는 내가 생각하는 비효율은 문제가 되지 않고, 우리에겐 좋은 garbege-collector가 있다고 말함ㅎㅎ
ㄴ> 책의 후반부에서 보면 메서드 체이닝 하는 예시가 나옴
ㄴ> 내 결론 : 함수가 최대한 한가지 일을 하도록(여러가지 일을 해도 하나의 목적성을 가지기) + 재사용할 함수는 분리해두자!
리팩터링 팁
1. 데이터 만들기
2. 배열 전체를 다루기 (for문사용보다 map(), 조건문보다는 filter()...)
3. 작은 단계로 나누기
추가적인 함수형 도구
https://lodash.com/docs/4.17.15
'함수형 프로그래밍 > 쏙쏙 들어오는 함수형 코딩' 카테고리의 다른 글
[함수형 코딩#15] 타임라인 격리/ JS thread (0) | 2023.07.13 |
---|---|
[함수형 코딩#14] 중첩데이터에 함수형도구 사용 (0) | 2023.07.12 |
[함수형 코딩#10~#11] 일급함수 (0) | 2023.07.07 |
[함수형 코딩#8 ~ #9] 계층형 설계 (0) | 2023.07.05 |
[함수형 코딩#1~#6] 느낀점 (0) | 2023.07.02 |