reduce 한마디 정리

배열 안의 모든 요소를 가지고 하나의 값으로 만드는 것

[☘,🌱,🌿,🍁] -> 🌳

코드로 reduce 정리

reduce 와 비슷한 forEach의 코드를 이용해서 reduce를 천천히 알아가보자

forEach()

아래 코드는 forEach문으로 배열의 모든 값들을 total값에 누적시킨다.

const numbers =[1,2,3,4,5];
let total =0; //총 합

numbers.forEach(number=>{
	total += number;//모든 요소의 합!
});

console.log(total);//15

reduce함수로 배열의 모든 값의 합 구하기

reduce는 배열함수이다.
reduce는 인자값으로 함수를 전달받는다.
이렇게 reduce에 인자로 전달해주는 함수를 reducer라고 한다.
reduce가 호출되면, reducer함수는 배열의 요소마다 한 번 씩 실행이 된다.
reducer는 accumulator, currentValue를 매개변수를 받는다.
currentValue : 현재 실행되고 있는 배열의 요소

요소	currentValue
1	1
2	2
3	3
4	4
5	5

forEach의 number가 currentValue라고 볼 수 있다.
accumultor : 값을 누적한 값이다.
accumultor의 초기값설정 방법 : 함수 인자 다음에 아래와 같이 0으로 초기값을 설정했다.

const total = numbers.reduce((accumulator,currentValue)=>{
	return accumulator + currentValue
},0);

accumulator는 currentValue 와 같이 reducer함수가 실행될 때마다 변화한다.
accumulator의 초기값 0으로 시작해서 반환값을 다음 reducer accumulator에 적용시킨다.

요소	accumulator	currentValue	반환값
1	0	1	1
2	1	2	3
3	3	3	6
4	6	4	10
5	10	5	15

최종적으로 반환된 값은 reducer가 최종적으로 반환할 total값이 된다.

reduce로 배열에서 가장 작은 값 찾기

이번에는 초기값 0을 넣어주는 대신 초기값 설정을 해주지 않아보았다.
초기값 설정이 없을 때, 첫번째 요소 reducer함수 실행을 하지 않고 바로 첫번째요소가 초기값으로 지정된다.

const numbers =[10,4,2,8];

const smallest = numbers.reduce(accumulator , currentValue)=>{
	if(accumulator<currentValue){
    	return currentValue;
    }
  	return accumulator;
});

console.log(smallest);//2

위의 식을 하나하나 살펴보자면,
첫번째 요소의 recducer함수는 스킵되고 다음 accumulator에 첫 요소가 적용되었다.
두번째 요소 reducer함수 실행 시 accumulator =10 과 currentValue를 비교해 작은 값이 다음 accumulator로 적용되었다.

요소	accumulator	currentValue	반환값
10	-	-	-
4	10	4	4
2	4	2	2
8	2	8	2

최종적으로 반환값은 2가 되었고 smallest 값이 되었다.

cart 배열 안의 객체의 모든 price를 더하기

cart 배열 안에 있는 세 개의 객체가 있다.
각 객체는 price가 있는데, 전체 price 값은 어떻게 될까?
코드로 한번 풀어보자

const cart =[
{	name :"사과",
	price :500,
},
{	name :"바나나",
	price :700,
},
{	name :"레몬",
	price :300,
},
];
const totalPrice = cart.reduce((accu,current) =>{
	accu += current.price;// 현재 요소의 price
	return accu;
},0);

위에 있는 내가 직접 푼 문제다. accu는 값을 누적시키는 변수이기 때문에 굳이 +=를 해서 값을 더할 필요가 없다. reducer 함수 특징에 맞게
accu + current.price로 변경했다.

const totalPrice = cart.reduce((accu,current) =>{
	return accu + current.price;// 현재 요소의 price
	
},0);

참고한 곳