[Javascript] Array.reduce

 

When to use

배열에서 특정 값에 대한 최종 합계를 구할 때

 

구문

array.reduce(callback, [intitialValue])

callback

각 배열 요소를 순회하며 실행할 함수

 

<콜백함수 원형>

reduce(
callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => 
		T, initialValue: T): T;

Parameter	Description
previousValue	이전까지의 순회 값
currentValue	이번 항목의 값
currentIndex	이번 순회 회차 수 (Optional)
array	순회 대상 배열 (Optional)

---

accumulator 

누산기, 콜백의 return value 누적. initialValue 로 시작 값이 정해질 수 있음.

 

initialValue

변수 이름 그대로, 초기 값!

* initialValue 미제공시 reduce 함수는 index 1부터 콜백함수를 실행한다.
 제공시 index 0에서 부터 실행.

 

---

학생 리스트의 점수의 최종 합을 구한다고 해보자.

 

먼저 학생 리스트를 작성한다.

 

학생 리스트

예제

이전에 forEach 를 사용할 경우 다음과 같은 코드를 통해 계산한다.

forEach

let total = 0;
studentList.forEach ((item)=>{
    total += item.score;
});

물론 이 코드도 충분히 결과값을 도출 할 수 있지만,

total이라는 합계를 담기위한 별도의 변수 선언이 필요해진다.

결과를 담기위한 변수가 많아질 경우 total을 초기화하거나 별도의 변수를 추가선언 해야할 것이다.

 

 

 

reduce ver

특정 원소에 대한 총합 , 추가 연산이 많아질 수록 reduce가 코드의 가독성 면에서 이점을 갖게된다.

 

 

출력 결과

총점1 : 1400 
index: 0 
index: 1 
index: 2 
총점2 : 1400

 

---

Reference

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

www.youtube.com/watch?v=g2nMKzhkvxw