[JavaScript] arr.reduce() - 배열 데이터를 활용하여 하나의 결과값 반환하기

Array.prototype.reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고,

하나의 결과값을 반환해주는 메서드이다.

 

제목 그대로 배열 데이터를 가지고 주어진 콜백 함수 내부 로직을 태워,

하나의 결과값으로 만들어 반환하는게 주 목적인 메서드이다.

 

일반적으로 reduce() 메서드를 검색해보면 기본 예제가 누산기를 활용한 숫자배열의 누적된 값을 구하는데 많이 사용되는데, 그것 외에도 정말 다양한 방법으로 활용이 가능한 메서드이다.

 

▷ 구문

arr.reduce(callback[, initialValue])

callback : 배열의 각 요소에 대해 실행할 콜백 함수이다. (총 네 가지 인수를 받아 사용한다.)

• accumulator : 콜백의 반환값을 누적하는 누산기를 의미한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue(초기값)를 제공한 경우에는 초기에는 initialValue의 값이다.
• currentValue : 처리할 현재 요소이다. (배열의 현재 값)
• currentIndex : 처리할 현재 요소의 인덱스 이다. (initialValue를 제공한 경우 0, 아니면 1부터 시작한다.)
• array : reduce() 메서드를 호출한 배열을 의미한다.

initialValue : callback함수의 최초 호출에서 첫 번째 인수에 제공하는 초기값이며, 생략할 경우 배열의 첫 번째 요소를 초기값으로 사용한다. (만약 빈 배열을 대상으로 reduce() 메서드를 사용할 경우 초기값이 없으면 오류가 발생한다.)

---

▷ 예제 1) Array.prototype.reduce() 기본 사용법

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

// 1. 누산기 기능을 사용한 모든 배열요소의 합 구하기 (초기값 X)
console.log(nums.reduce((a, b) => a + b)); // 15

// 2. 누산기 기능을 사용한 모든 배열요소의 합 구하기 (초기값 O)
console.log(nums.reduce((a, b) => a + b, 10)); // 25

 

역시나 reduce() 메서드의 기본예제는 누산기 기능을 활용한 모든 배열요소의 합이다.

reduce() 메서드의 callback 함수 내부에서 결과값을 반환하면 첫번째 매개변수인(accumulator)에 게속해서 누적되는 특성을 이용한 것이다.

 

이러한 특성을 기반하여 기존에 제공해주던 대부분의 array 메서드인 map(), filter() 등의 기능들을 전부 reduce() 메서드를 통해 구현이 가능하다.

 

▷ 예제 2) reduce() 로 filter() 구현하기

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

// filter()
let numFilter = nums.filter(num => num > 3);
console.log(numFilter); // [4, 5]

// reduce()
let numReduce = nums.reduce((acc, cur) => {
    if(cur > 3) acc.push(cur);
    return acc;
}, []);
console.log(numReduce); // [4, 5]

 

reduce() 메서드를 사용할 때 어떤 값으로 변환해서 반환할것인지를 초기값에 선언을 해줘야한다.

예를들어 객체나 배열로 반환하고자 할 때 {} 나 [] 를 선언해 주어야 한다는 의미이다.

 

위 예제를 보면 filter로 구현된 것을 reduce로 동일하게 구현이 가능한것을 볼 수 있다.

 

이 처럼 reduce() 메서드를 활용한다면 다양한 배열 메서드들은 전부 reduce 메서드를 통해 구현이 가능하다.

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN