[JavaScript] 자기 안에 저장소를 가지고 있는 reduce()

What

reduce()에 대한 정의는 사실 간단하다. 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다고 MDN에 정의되어 있다. 사용하는 방법도 간단하다. 콜백 함수를 사용하므로, 콜백 함수의 매개 변수에 순서대로 누산기(acc), 현재 값(cur), 현재 인덱스(idx), 원본 배열(src)을 집어 넣으면 된다. 주로 사용되는 게 누산기와 현재 값인데, 여기서 누산기를 그냥 reduce()가 가지고 있는 작은 저장소 정도로 이해하면 쉽다.

 

reduce() 메서드는 이러한 reducer 덕분에 웬만한 다른 배열 메서드를 대신하여 사용할 수 있다. 즉 메서드를 함수처럼 사용할 수 있는 것이다. 때문에 많은 개발자들이 reduce()를 좋아한다. 단순히 배열 원소의 누적값만 구하는 메서드가 아니라 내 입맛에 맞게 배열 레시피를 만들 수 있기 때문이다.

 

How

누적값 구하기

const arr = [1, 2, 3, 4, 5] // 모든 코드 공통

const result = arr.reduce((acc, cur) => {
    acc += cur;
    return acc;
}, 0)

console.log(result); // 15

콜백 함수 뒤에 0은 초깃값을 나타낸다. 웬만하면 0이나 빈 배열([ ])을 넣어주도록 하자.

누산기(acc)는 저장소라고 했다. 처음 저장소에는 0이 들어있다. 이제 1부터 쭉 reduce()를 실행해보자.

0 += 1, 누적값: 1, 1 += 2, 누적값: 3 ... 이런 식으로 5까지 반복하면 누산기에는 총 15가 저장되어 있게 된다.

reduce()를 단순 누적값 구하는 메서드로 기억하는 사람은 이 정도만 알 것이다. 하지만, 뒤에 나오는 코드들을 보면 정말 reduce()가 무궁무진하게 쓰일 수 있구나라는 걸 알 수 있을 것이다.

 

홀수-짝수 구하기

const result = arr.reduce((acc, cur) => {
    acc.push(cur % 2 ? '홀수' : '짝수')
    return acc;
}, [])

console.log(result); // ['홀수', '짝수', '홀수', '짝수', '홀수']

이런 식으로 map() 메서드의 역할도 할 수 있다. 빈 배열이었던 누산기에 현재 값을 push 하되, 2로 나눠서 나머지가 1이면 홀수, 0이면 짝수로 바꿨다. 이런 식으로 reduce() 안에서 if문, 삼항 조건 연산자 등 다양하게 조건문을 세워서 배열의 원소 값을 바꿀 수 있다.

 

일정 숫자 이상만 배열로 반환하기

const result = arr.reduce((acc, cur) => {
    if(cur >= 3){
        acc.push(cur);
    }
    return acc;
}, [])

console.log(result); // [3, 4, 5]

filter() 역할도 가능하다. 배열의 3이상만 따로 반환하는 식을 if문을 이용하여 조건문을 세우면 간단히 filter() 역할도 수행할 수 있다.

 

배열 원소 역순으로 뒤집기

const result = arr.reduce((acc, cur) => {
    acc.unshift(cur);
    return acc;
}, [])

console.log(result); // [5, 4, 3, 2, 1]

reverse()도 매우 간단하게 표현할 수 있다. 뒤에서 추가하는 push()가 아닌 앞에서 추가하는 unshift()를 사용했다.

 

이외에도 다양한 방법들로 배열을 다룰 수 있다. reduce()만 있어도 다른 메서드가 필요 없다는 말이 괜히 하는 말이 아니다. 어떻게 코딩하느냐에 따라서 배열을 내 맘대로 바꿀 수 있고, 원하는 값을 구할 수도 있다.

reduce()를 사용할 땐, 항상 초깃값을 넣는 것과 return으로 누산기를 반환하는 것, 초깃값이 배열 형식([  ])이라면

push()나 unshift()같은 메서드로 누산기에 추가하는 것 등만 기억해주자.

 

1. arr.reduce((acc, cur) => {...})
2. 초깃값은 꼭 넣어주는 게 좋다.
3. 마지막엔 return acc; 를 해주자.
4. reduce()는 신이다.