책으로 공부하다 유용할꺼 같아서 기록해 둡니다.
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 메서드는 2개의 인수, 즉 콜백 함수와 초기값 0을 전달받아 자신을 호출한 배열의 모든 요소를 누적한 결과를 반환합니다.
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];
const max = values.reduce((acc, cur) => (acc > cur ? acc : cur), 0);
console.log(max); // 5최대값을 구할 때는 reduce 메서드보다 Math.max 메서드를 사용하는 방법이 더 직관적입니다.
const values = [1,2,3,4,5];
const max = Math.max(...values);
console.log(max); // 5요소의 중복 횟수 구하기
const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];
const count = fruits.reduce((acc, cur) => {
acc[cur] = (acc[cur] || 0) + 1;
return acc;
}, {});
console.log(count); // {banana: 1, apple: 2, orange: 2}중첩 배열 평탄화
const values = [1, [2, 3], 4, [5, 6]];
const flatten = values.reduce((acc, cur) => acc.concat(cur), []);
console.log(flatten); // (6) [1, 2, 3, 4, 5, 6]중첩 배열을 평탄화할 때는 reduce 메서드보다 ES10(ECMAScript 2019)에서 도입된 Array.prototype.flat 메서드를 사용하는 것이 더 직관적입니다.
[1, [2, 3, 4, 5]].flat(); // (5) [1, 2, 3, 4, 5]
[1, [2, 3, [4, 5]]].flat(2); // (5) [1, 2, 3, 4, 5]
[1, [2, 3, [4, 5]]].flat(Infinity); // (5) [1, 2, 3, 4, 5]중복 요소 제거
const values = [1, 2, 1, 3, 5, 4, 5, 3, 4, 4];
const result = values.reduce((unique, val, i, _values) =>
_values.indexOf(val) === i ? [...unique, val] : unique, []);
console.log(result); // (5) [1, 2, 3, 5, 4]중복 요소를 제거할 때는 reduce 메서드보다 filter 메서드를 사용하는 것이 더 직관적 입니다.
const values = [1, 2, 1, 3, 5, 4, 5, 3, 4, 4];
const result = values.filter((val, i, _values) => _values.indexOf(val) === i);
console.log(result); // (5) [1, 2, 3, 5, 4]또는 중복되지 않는 유일한 값들의 집합인 Set을 사용 할수도 있습니다.
중복 요소를 제거할 때는 이 방법을 추천 합니다.
const values = [1, 2, 1, 3, 5, 4, 5, 3, 4, 4];
const result = [...new Set(values)];
console.log(result); // (5) [1, 2, 3, 5, 4]출처 - 모던 자바스크립트 Deep Dive
