reduce는 더 이상 추가할 요소가 없을 때까지 각 단계에서 이전에 단계의 결과에 현재 배열 값을 추가하면서 요소별로 배열을 살펴본다.
reduce는 하나의 결과값만을 반환한다는 것이 포인트(누적값)이다.
reduce로 특정프로퍼티 값을 합산할때는 초기값(두번째 인수)를 지정해주어야 한다.
array는 이러한 특성 때문에 누적값, 배열의 합을 구할 때 유용하다.
이러한 요소로 이루어진 reduce의 형식은 다음과 같다.
[array].reduce((acc,cur,idx,arr) => acc + cur,초기값);
reduce의 콜백함수는 4개의 인수를 전달받아 배열의 length만큼 호출된다. 호출한 값을 누적하여 하나의 값을 반환한다.
다음과 같이 콜백함수에 조건식을 주어 filter처럼 사용할 수도 있다.
reduce는 누적 값을 구하는 함수이기 때문에 매우 유용하다.
let fruits = [
{name : 'strawberry', color : 'red'},
{name : 'banana', color : 'yellow'},
{name : 'watermelon', color : 'red'},
{name : 'apple', color : 'red'},
{name : 'orange', color : 'orange'}
]
let redFruits = fruits.reduce((acc,cur)=>{
if(cur.color === 'red'){
acc.push(cur.name);
}
return acc;
},[]);
console.log(redFruits);
//["strawberry","watermelon","apple"]
reduce의 예제 정리
예제
1.reduce로 누적합 구하기
const arr = [1,2,3,4,5];
const result = arr.reduce((acc,cur,idx)=>{
return acc +=cur;},0);
console.log(result); //15
2.reduce로 누적합 구하기(초기값 10)
const arr2 = [1,2,3,4,5];
const result2 =
arr2.reduce((acc,cur)=>{
return acc += cur;},10);
console.log(result2); //25
reduce에서 초기값을 생략할 수도 있지만 초기값을 설정하는 것이 안전하다. [ ](빈배열)
일 경우 에러가 나기 떄문이다. 다음 예제같이 초기값을 설정하지 않아도 값은 나온다(array가 안비어 있을 경우)
const sum = [1,2,3,4].reduce((acc,cur)=>acc+cur);
console.log(sum); //[1,2,3,4]
3. reduce로 특정 프로퍼티의 값을 합산하는 경우
acc+cur.
뒤에 프로퍼티의 키값을 입력한다.이 경우에는 꼭 키값을 입력해야 한다.
const products = [
{id: 1, price : 100},
{id: 2, price : 200},
{id: 3, price : 300}
];
const priceSum = products.reduce((acc,cur)=>acc+cur.price,0);
console.log(priceSum); //600
4. 평균 구하기
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
i === length -1 ? (acc + cur)/length :
length-1은 맨 마지막 요소, 이때는 평균을 반환한다.
acc + cur:
그 전까지는 누적값을 반환한다.
5. reduce로 요소의 중복 횟수 구하는 법
const fruits = ['banana','apple','banana','apple','banana'];
const count = fruits.reduce((acc,cur)=> {
//첫 순회시 acc는 {}가 되고, cur은 'banana'이다
//{}에 cur가 키값으로, 요소의 개수를 프로퍼티 값으로 할당한다.
//원래 값이 있으면(acc[cur])에 1을 더하고
//없으면 (0) 1을 더한다.
acc[cur] = (acc[cur] || 0) + 1;
return acc;
//빈객체가 초기값이 된다
}, {} );
console.log(count); //{ banana: 3, apple: 2 }
6. 중첩 배열 평탄화
const values = [1,[2,3],4,[5,6]];
const flatten = values.reduce((acc,cur) => acc.concat(cur),[]);
7.객체의 특정 프로퍼티 값을 합산
꼭! 초기값을 설정해주어야 한다.
const products = [
{id : 1, price : 100},
{id : 2, price : 200},
{id : 3, price : 300},
]
const priceSum = products.reduce((acc,cur)=> acc + cur.price, 0 );
console.log(priceSum); //600