12 [ 배열 메소드 _reduce() / reduceRight() : 배열 요소 하나로 정리하기 ]

reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

 

reducer함수는 네 개의 인자를 가진다.

1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

 

 

 

예제를 통해 알아보자.

const arrNum1 = [100, 200, 300, 400, 500];
const result1 = arrNum1.reduce(element => element);
console.log(result1);	//100

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.reduce((previous, current) => previous + current);
console.log(result2);	//1500

const arrNum3 = [100, 200, 300, 400, 500];
let result3 = 0;
for( let i=0; i<arrNum3.length; i++ ){
	result3 = result3 + arrNum3[i]
} 
console.log(result3);	//1500

const arrNum4 = [[100,200],[300,400]];
const result4 = arrNum4.reduce((p,c) => p.concat(c));
console.log(result4);	//[100, 200, 300, 400]

- concat메소드는 결합 메소드로 배열을 결합 해준다.

 

 

 

reduceRight(): 배열의 각 값 (오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여야합니다.

 

예제를 통해 알아보자.

const arrNum5 = ["javascript", "react", "vue"];
const result5 = arrNum5.reduceRight((p,c) => p + c);
console.log(result5);	//vuereactjavascript

실행과정은 이렇다!

01. reactjavascript

02. vuereactjavascript

 

 

 

 

참고:

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight