Array.prototype.reduce()

 

📢 참고하면 좋을 사이트:

Array.prototype.reduce() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다.

 

그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열을 변경되지 않는다.

 

reduce 메서드는 첫번쨰 인수로 콜백 함수, 두번쨰 인수로 초기값을 전달받는다. reduce 메서드의 콜백 함수에는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값, reduce 메서드를 호출한 배열의 요소값과 인덱스, reduce 메서드를 호출한 배열 자체, 즉 this가 전달된다. 

 

const sum = [1,2,3,4].reduce((accumulator, currentvalue, index, array) => accumulator + currentValue, 0);
console.log(sum); // 10

 

reduce 메서드의 콜백 함수는 4개의 인수를 전달받아 배열의 length만큼 총 4회 호출된다.

이때 콜백 함수로 전달되는 인수와 콜백 함수의 반환값은 다음과 같다.

 

구분	콜백 함수에 전달되는 인수				콜백 함수의 반환값
	accumulator	currentValue	index	array
첫번째 순회	0(초기값)	1	0	[1,2,3,4]	1(accumulator + currentValue)
두번째 순회	1	2	1	[1,2,3,4]	3(accumulator + currentValue)
세번째 순회	3	3	2	[1,2,3,4]	6(accumulator + currentValue)
네번째 순회	6	4	3	[1,2,3,4]	10(accumulator + currentValue)

 

이처럼 reduce메서드는 초기값과 배열의 첫 번째 요소값을 콜백 함수에게 인수로 전달하면서 호출하고 다음 순회에는 콜백 함수의 반환값과 두번째 요소값을 콜백 함수의 인수로 전달하면서 호출한다. 이러한 과정을 반복하여 reduce 메서드는 하나의 결과값을 반환한다.

 

reduce 메서드는 하나의 결과값을 반환한다.

 

reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하며 하나의 결과값을 구해야 하는 경우에 사용한다.

 

//평균 구하기
const values = [1,2,3,4,5,6];

const average = values.reduce((acc, cur, i, {length}) =>{

return i === length -1 ? (acc + cur) / length : acc + cur;
}, 0);

console.log(average); // 3.5

//최댓값 구하기
const values = [1,2,3,4,5,6];

const max = values.reduce((acc, cur) => (acc > cur ? acc: cur),0);
console.log(max); // 5

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

const max = Math.max(...values);
//var max = Math.max.apply(null, values);
console.log(max); // 5

//요소의 중복 횟수 구하기

cont fruits = ['banana', 'apple', 'orange', 'orange','apple'];

const count= fruits.reduce((acc, cur) => {
// 첫번째 순회 시 acc는 초기값인 {}이고 cur은 첫번째 요소인 'banana'다.
// 초기값으로 전달받은 빈 객체에 요소값인 cur을 프로퍼티 키로, 요소의 개수를 프로퍼티 값으로 할당한다.
//만약 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티값을 1로 초기화한다.
acc[cur] = (acc[cur] || 0) + 1;
return acc;
}, {});
//콜백 함수는 총 5번 호출되고 다음과 같이 결과값을 반환한다.
/*
{banana: 1} => {banana:1, apple:1} => {banana:1, apple:1, orange:1}
=> {banana:1, apple:1, orange:2} => {banana:1, apple:1, orange:2}
*/

console.log(count); // {banana:1, apple:1, orange:2}

 

참고 : 모던 자바스크립트 딥다이브 도서