[JavaScript] reduce 함수 알아보기

reduce()는 사전적으로 줄이다는 뜻을 가지고 있습니다.
사전적 의미 그대로 배열의 요소를 순차적으로 순회하며 작업의 처리 결과를 누적하여 최종 리턴 값을 하나로 줄여 리턴하는 함수입니다. 
map(), filter()와 다르게 배열이 아닌 하나의 결괏값을 반환한다는 큰 차이가 있으며, 보통 배열의 요소를 하나의 값으로 도출할 때 사용됩니다.

 

 

reduce()  

"배열".reduce(callback[, initialValue])

• "배열".reduce(callback(accumulator, currentValue, index, array), initialValue);
  • accumulator : 누적값. 배열을 순회하면서 작업의 처리 결과를 누적하는 값으로 순회가 종료되면 최종 리턴값이 되는 값입니다.
  • currentValue : 처리할 현재 요소
  • currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
  • array (Optional) : reduce가 순회하는 array 배열을 의미합니다.

InitialValue(초기 값)이 존재하는 경우

const num = [10, 20, 30, 40, 50];
const newArray = num.reduce((acc, value) => { return acc + value },100);

console.log(newArray); // 결과 :  250

---

const arr = [1, 2, 3, 4, 5]
  
arr.reduce(function (acc, cur, idx) {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0);
 
// arr cur idx
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// 10 5 4

출력 결과를 보면 initialValue이 없기 때문에 0부터 시작하고, 누적값에 현재 요소가 전달되는 것을 볼 수 있습니다.

---

배열 복사하기

const numArray = [10, 20, 30, 40, 50];
const newArray = myArray.reduce((acc, value) => { 
     acc.push(value);
     return acc; 
 },[]);

console.log(newArray); // 결과 : [10, 20, 30, 40, 50]

위 코드를 보면 numArray에 있는 배열 요소들을 reduce함수,화살표 함수와 push()를 이용하여 newArray 변수에 복사합니다. 또한 initialValue(초기 값)을 배열로도 가능하다는 것을 알 수 있습니다.

 

reduce()를 이용한 map() 구현

const arr = [1, 2, 3, 4, 5];

const result = arr.map(value => value * 10);

console.log(result); // 결과 : [10, 20, 30, 40, 50]

const num = [1, 2, 3, 4, 5]
  
const result = num.reduce(function (acc, cur) {
  acc.push(cur % 2 ? "홀수" : "짝수");
  return acc;
}, []);
 
console.log(result);
// [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

reduce()를 이용한 filter() 구현

const num = [10, 20, 30, 40, 50];
const newArray = num.reduce((acc, value, index) => { 
     if(index%2){
       acc.push(value);
     }
     return acc; 
 },[]);

console.log(newArray); // 결과 [20, 40]

 

 

 

 

Reference

• Mdn web docs
• 모던 JavaScript
• Inpa Dev