JavaScript reduce()

Swfit를 배울 때 가장 눈여겨봤던 개념이 바로 함수형 프로그래밍과 고차 함수였다. 복잡했던 기존 로직을 고차 함수를 통해 간결하게, 그리고 명확하게 바꿀 수 있었기 때문이다. 그런데 마침 JavaScript 또한 마찬가지로 고차 함수(map, filter, reduce) 개념을 받아들이고 있었고, 나는 이 중 map과 filter를 주로 사용했다.

 

그리고 얼마 전, Swift를 다시 공부하면서 Swift에서의 고차함수를 보다가 까먹고 있었던 reduce를 다시 보게 되었다 ㅋㅋㅋ 그 당시에는 이거 잘 사용하면 긴 코드도 짧게 줄일 수 있겠는데... 하고 넘어갔는데, 이번에 JavaScript 코드 리팩을 하다가 reduce를 사용하면 조금 더 명확하고, 가독성 좋은 코드를 만들 수 있지 않을까? 해서 찾아보게 되었다!

reduce()

The reduce() method reduces the array to a single value.

 

reduce가 줄이다라는 의미를 갖고 있듯이, JavaScript에서의 reduce 함수는 array를 하나의 값으로 줄여주는 역할을 한다.
사용 방법 및 설명은 다음과 같다.

 

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

 

1. total: 초기에는 initialValue로 시작. 이후에는 함수에서 return 된 값 (누적되고 있는 값이라고 생각하면 쉽다) - 필수
2. currentValue: array의 current element (처리되고 있는 element) - 필수
3. currentIndex: current element의 index
4. arr: reduce를 호출하고 있는 array
5. initialValue: 함수의 첫 번째 인자에 넘겨지는 초기값

 

반올림한 수를 모두 더하는 경우를 생각해보자! reduce를 사용하지 않으면 일반적으로(?) 다음과 같이 코드를 짠다.

const nums = [15.5, 2.3, 1.1, 4.7];
let total = 0;
nums.forEach(num => total += Math.round(num));
console.log(total); // 24

0을 가지는 total이라는 변수를 만들고, nums를 forEach문으로 돌면서 각 요소를 반올림한 값을 total에 누적시키는 방식이다. 물론 아무런 문제가 없는 코드지만 total의 다음 줄을 읽을 때까지 total이 어떤 때에 사용되는지, 그리고 forEach문을 들여다보기 전까지 무엇을 위한 반복문인지 명확하지 않다.

 

하지만 reduce를 사용한다면????

const nums = [15.5, 2.3, 1.1, 4.7];
console.log(nums.reduce((total, num) => total + Math.round(num), 0)); // 24

nums라는 array가 하나의 값으로 줄여지게 되겠구나. 그리고 그 값은 total이 될 것이며, 반올림한 num이 계속해서 더해진 값이구나, 또 초기값은 0이구나. 라는 걸 한눈에 명확하게 알 수 있게 된다. 가독성이 확실히 좋은 것 같음!

 

아 그리고 return type이 고정되어 있지 않기 때문에 더 유용하게 사용할 수 있다! (map은 항상 배열을 반환하듯이 대부분은 return type이 고정되어 있다)
아래 예제는 return type을 object로 설정한 예제이다. reduce를 통해 animal 배열에 들어있는 같은 종류의 동물들이 각각 얼마나 되는지 담고 있는 객체를 얻을 수 있다.

const animals = ['dog', 'cat', 'rabbit', 'dog', 'dog'];
const result = animals.reduce((obj, animal) => {
    if (!obj[animal]) {
        obj[animal] = 0;
    }
    obj[animal]++;
    return obj;
}, {});

 

이제는 reduce 사용법도 알았으니 map, filter와 같이 reduce도 많이 사용해야겠다.

 

아! 까먹은 게 있는데 reduce는 원 배열을 바꾸지 않는다! 다른 것들도 혹시 모르니까 메모 메모!

 

The reduce() method reduces the array to a single value.

The reduce() method executes a provided function for each value of the array (from left-to-right).

The return value of the function is stored in an accumulator (result/total).

Note: reduce() does not execute the function for array elements without values.

Note: This method does not change the original array.

 

출처:

JavaScript Array reduce() Method

JavaScript Array reduce() Method

javascript reduce() 함수 파헤치기

javascript reduce() 함수 파헤치기

reduce를 쓰면서 유용했던 것 몇가지 정리

reduce를 쓰면서 유용했던 것 몇가지 정리 — Steemit