관리 메뉴

흰둥씨의 개발장

[함수형 코딩#12~#13] 함수형 반복 / 체이닝 본문

함수형 프로그래밍/쏙쏙 들어오는 함수형 코딩

[함수형 코딩#12~#13] 함수형 반복 / 체이닝

돈워리비해삐 2023. 7. 9. 00:39

##이번장의 핵심 내용 : 배열을 다루기 위한 함수형 도구 알아보기 


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