Array의 반복 관련 메서드(2) - reduce

JavaScript Array의 반복 관련 메서드 두 번째 포스트다.

 

첫 번째 포스트는 다음을 참고 바란다.

Array의 반복 관련 메소드(1)

 

첫 번째 포스트에서는 forEach, map, filter, find를 다뤘다.

 

위 메소드들은 실무에서 많이 쓰지만 reduce하나면 거의 커버가 가능하고, 추가적인 형태로도 구현이 가능하다.

 

물론 reduce 역시 별도로 break문은 없어서 find를 구현하긴 어렵지만 시간 복잡도를 생각하지 않는다면 불가능한 것은 아니다.

 

합계

const ary = [1, 2, 3, 4, 5];

const sum = ary.reduce((r, e) => r + e);
console.log(sum); // 15

const sum = ary.reduce((r, e, i, a) => {
    r += e;
    console.log(i); // 0, 1, 2, 3, 4
    console.log(a); // [1, 2, 3, 4, 5] ...
    return r;
}, 0);
console.log(sum); // 15

위와 같이 가장 흔한 예로 합계를 구하는 것이 있다.

첫 번째 인자는 결과값, 두 번째 인자는 ary의 인자, 세 번째는 배열의 인덱스, 네 번째는 원본 배열의 값이다.

그리고 마지막에 있는 0은 초기값이다.

 

즉, 첫 번째 루프에서는 초기값이 r에 할당되고, return을 해주면 다음 루프에서 return값이 r에 할당되면서 자연스럽게 합계가 구해지고, 루프를 다 돌면 sum에 마지막  return값이 들어온다.

 

그래서 이런 식으로도 모든 인자를 곱하는 걸로도 응용이 가능하다.

const ary = [1, 2, 3, 4, 5];

const result = ary.reduce((r, e) => r * e);
console.log(result); // 120

 

map처럼 구현

const ary = [1, 2, 3, 4, 5];

const result = ary.reduce((r, e, i) => {
    r.push({
        index: i,
        value: e
    });
    
    return r;
}, []);

 

filter처럼 구현

const ary = [1, 2, 3, 4, 5];

const result = ary.reduce((r, e) => {
    if (e >= 3) {
    	r.push(e);
    }
    
    return r;
}, []);
console.log(result); // [3, 4, 5]

 

map이나 filter와 다른 점이라면, 초기값에 0이나 빈 배열만 들어가는 게 아니라 문자열도 들어갈 수 있고 숫자 5, 이미 인자가 있는 배열도 들어갈 수 있으며, 따라서 여러 다양한 형태로 원하는 값을 만들 수 있다.

 

for와 whiler같은 반복문이나 map, filter, find 등으로 간단하게 몇 줄로 처리가 불가할 경우 reduce를 쓰면 코드의 양을 획기적으로 줄일 수 있고 더 직관적이고 다양한 기능들을 구현할 수 있다.