Reduce method

2022-Sep-16, today getting out of my comfort zone.

reduce 함수 정리해보자. 사용할 때마다 헷갈린다...

reduce method

1. reduce의 기본 활용 예시부터 살펴보자.

let sumArray = myArray.reduce((acc,cur,i) => {
acc += cur
return acc},0);

나의 배열을 reduce로 접근하여, 모든 배열 요소의 합을 구하는 로직이다.

1. acc, accumulator는 배열을 순회하며 누적되는 값이며, 연산이 종료되면 return되는 값이다.

2. cur, currentvalue는 배열을 순회하며 연산을 진행할 때, 특정 인덱스에서의 배열 요소, 즉 연산을 처리할 현재 값이다.

3. reduce가 받는 매개변수 중, initialValue도 있는데 이 값을 지정해주냐, 해주지 않느냐에 따라 return 되는 acc값이 달라진다. 해주지 않으면 acc가 배열의 첫번째 요소로 지정되고, 연산 진행 시 cur 값이 두번 째 배열 요소부터 시작된다.

4. 이때 arrow function을 썼음에도 return을 명시해준 이유는 { } 안에 코드를 작성하였기 때문에. { }안에 Logic 이 있기 때문에! 암시적 반환이 아니다.

2. reduce는 덧셈 method가 아니다

reduce는 filter, map, forEach와 더불어 아주 효율적인 내장 함수이다. 다음 예시를 확인해보자. 자연수 배열의 홀짝 유무를 확인하여 리턴해주는 로직이다.

let num = [2,4,6,8,1,3,5,7];

let result = num.reduce((acc,cur,i) => {
 acc.push(cur%2===0 ? '짝' : '홀'
 return acc;},[]);
 // result : ['짝','짝','짝','짝','홀','홀','홀','홀',] 

reduce로 mapping이 가능하다.. 덧셈 활용 예시와 다른 점이 있다면, initialValue를 0이 아닌 [], 즉 배열로 설정했다는 점이다. 즉 acc의 초기값은 빈 배열이다. 그 후, num 배열을 순회하며 삼항연산자를 거치면 '짝' 또는 '홀' 문자Type이 acc에 계속 push 된다.

reduce는 덧셈 전용 method가 아니다. 활용하기에 따라 filtering 기능, mapping 기능 모두 구현할 수 있는 아주 효과적인 내장 함수이다.

3. reduce의 또 다른 예시

중복되는 값이 포함되어 있는 배열에서 각 요소 별 갯수를 알고 싶다. 어떻게 할 수 있을까?

let myArray = ['apple','grape','orange','orange','grape','grape'];
let result = myArray.reduce((acc,cur) => {
    if(!acc[cur]){
    acc[cur] = 0;
    }
    acc[cur]++
    return acc},{});
console.log(result);

이번엔 acc의 초기값이 { }, 빈 오브젝트 배열이다. 배열을 순회하면서 acc 배열에 현재 값, 그러니까 cur라는 key 값이 있는지 없는지 확인해서 없으면 0을 value로 할당하고 있으면 +1을 해주는 방식이다.

(참고로, Object[key] 는 Object의 특정 key에 접근하는 방식이다.)

4. reduce의 또 또 다른 활용 예시

이번엔, filtering 기능을 구현해보자. 자연수로 이루어진 배열이 주어질 때, 짝수만 filtering해서 숫자와 함께 '짝'이라는 문자열이 출력되도록 해보자.

let num = [1,2,3,4,5,6,7,8,9];
let result = num.reduce((acc,cur,i) =>{
    cur % 2 === 0 ? acc[cur] = '짝' : i++
    return acc;},{});

삼항 연산자까지 적용해서 시도해봤다. 참이면 '짝'이 value로 할당되고 거짓이면 i++ 을 실행해서 acc에 아무런 영향을 주지 않도록 작성했다.

느낀점

reduce는 누적 더하기 함수가 아니다! 로직을 어떻게 설계하느냐에 따라, mapping도 filtering 도 가능하다. 앞으로 forEach, Map, for , filter 함수 써야할 때가 오면 한 번씩 사용해봐야겠다.

끝!