reduce( )/reduceRight( )

reduce( ) / reduceRight( )

reduce( ) 메서드는 배열의 여러개의 값을 하나의 값으로 축소하고 축소한 값을 반환합니다
reduceRight( ) 메서드는 배열의 여러개의 값을 하나의 값으로 축소하고 축소한 값을 역순으로 반환합니다

---

reduce( )과 reduceRight( ) 메서드

reduce( ) 메서드는 배열의 값을 하나의 값으로 축소하며, 반복문과 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드입니다.
하지만 콜백함수가 들어갈 때 반환하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 차이점이 있습니다. 즉, 마지막 콜백 함수가 동작한 이후의 반환 값이 reduce 메서드의 return 값이 됩니다.
reduceRight( )는 동일하지만 역순으로 반환해줍니다.

　 문법
arrNum1.reduce(element => element) : 배열값을 축소해 첫번째 값만 남기고 반환
arrNum2.reduce((p, c) => p + c) : 배열의 값을 전부 합산함
arrNum4.reduce((p,c) => p.concat(c)) : 배열을 결합함

const arrNum1 = [100, 200, 300, 400, 500];         
const arrReduce1 = arrNum1.reduce(element => element);

document.querySelector(".sample07_N1").innerHTML = "1";
document.querySelector(".sample07_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M1").innerHTML = "arrNum1.reduce(element => element)";
document.querySelector(".sample07_P1").innerHTML = arrReduce1; 


const arrNum2 = [100, 200, 300, 400, 500];         
const arrReduce2 = arrNum2.reduce((p, c) => p + c);


document.querySelector(".sample07_N2").innerHTML = "2";
document.querySelector(".sample07_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M2").innerHTML = "arrNum2.reduce((p, c) => p + c)";
document.querySelector(".sample07_P2").innerHTML = arrReduce2; 


const arrNum3 = [100, 200, 300, 400 ,500];
let sum = 0;

for( let i=0; i<arrNum3.length; i++){
    sum += arrNum3[i];
}

document.querySelector(".sample07_N3").innerHTML = "3";
document.querySelector(".sample07_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M3").innerHTML = "for()";
document.querySelector(".sample07_P3").innerHTML = sum;


const arrNum4 = [[100,200], [300,400]];
const arrReduce4 = arrNum4.reduce((p,c) => p.concat(c));

document.querySelector(".sample07_N4").innerHTML = "4";
document.querySelector(".sample07_Q4").innerHTML = "[[100,200], [300,400]]";
document.querySelector(".sample07_M4").innerHTML = "arrNum4.reduce((p,c) => p.concat(c))";
document.querySelector(".sample07_P4").innerHTML = arrReduce4;


const arrNum5 = ["javascript", "react", "vue"];
const arrReduce5 = arrNum5.reduceRight((p,c) => p+c);

document.querySelector(".sample07_N5").innerHTML = "5";
document.querySelector(".sample07_Q5").innerHTML = "['javascript', 'react', 'vue']";
document.querySelector(".sample07_M5").innerHTML = "arrNum5.reduce((p,c) => p.concat(c))";
document.querySelector(".sample07_P5").innerHTML = arrReduce5;

결과보기

번호	기본값	메서드	리턴값