[Javascript] 배열의 합계, 평균 계산하기 - reduce(), reduceRight()

배열의 내장객체인 reduce() 함수는

배열의 element들을 처리하여 하나의 값을 도출해 내는 함수입니다.

 

여러가지 다양한 방법으로 이 함수를 활용할 수 있지만,

이 포스팅에서는 reduce() 함수를 이용하여

배열 element들의 합계와 평균을 계산하는 방법을 알아보도록 하겠습니다.

 

배열의 합계, 평균 계산하기  - reduce(), reduceRight()

1. reduce()
2. reduce() 함수로 배열의 합계 구하기
3. reduce() 함수로 배열의 평균 구하기
4. reduceRight()

 

1. reduce()

arr.reduce(callback(accumulator, currentValue [, currentIndex[, array]]) [, initialValue])

let value = arr.reduce(function(accumulator, currentValue, currentIndex, array) {
   // ... 
}, [initialValue]);

 

 reduce() 함수는... 

배열(arr)의 각 element들에 대해서 

파라미터로 입력받은 callback 함수를 실행하여,

하나의 리턴값을 반환하는 함수입니다.

callback 함수는 배열(arr)의 모든 element를 대상으로 한번씩 호출됩니다.

이 때, callback 함수에서 리턴되는 값은,

다음 element에 대한 callback 함수 실행시 파라미터(accumulator)로 입력되어 활용될 수 있습니다.

배열의 모든 element들에 대해 callback 함수 실행이 완료되면,

reduce() 함수는 마지막 element의 callback 함수의 리턴값을 리턴합니다.

따라서, reduce() 함수를 사용하면, 배열을 순차적으로 순회하면서 배열의 값을 누적하는데 유용합니다.

 

 파라미터 

callback 함수

배열의 각 element들에 대해서 실행되는 callback 함수이고, 

이 함수의 리턴값은 다음 element에 대한 callback 함수 실행시 파라미터(accumulator)로 전달됩니다.

• accumulator : 이전 element에 대한 callback 함수의 리턴값
• currentValue : 현재 처리중인 배열 element
• currentIndex : 현재 처리중인 배열 index
• array : 배열 전체

 

initialValue

callback 함수를 처음 실행할 때, accumulator의 값.

 

initialValue를 지정하지 않으면, 

callback 함수를 처음 실행할 때,

accumulator의 값은 배열의 첫번째 값(arr[0])이 되고,

currentIndex는 1이 됩니다.

 

initialValue를 지정하면,

callback 함수를 처음 실행할 때,

accumulator의 값은 initalValue가 되고,

currentIndex는 0이 됩니다.

	accumulator  (callback 함수 처음 실행시)	currentValue (callback 함수 처음 실행시)	currentIndex (callback 함수 처음 실행시)
initialValue가 지정된 경우	initialValue	arr[0]	0
initialValue가 지정되지 않은 경우	arr[0]	arr[1]	1

 

 리턴값 

최종 누적 값(accumulator)

 

2. reduce() 함수로 배열의 합계 구하기

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

reduce() 함수를 사용하여 배열의 합계를 구했습니다.

reduce() 함수의 파라미터로 전달되는 callback 함수는

누적값(sum), 현재 처리중인 배열의 element(currValue)를 파라미터로 받습니다.

그리고, 누적값과 currValue의 합을 리턴하면,

배열의 다음값을 처리할 때, 이 리턴된 값이 callback 함수의 누적값(sum)으로 전달됩니다.

초기값은 0으로 지정하였습니다.

 

가능하면 초기값을 반드시 지정하세요.

reduce() 함수의 두 번째 파라미터인 initialValue는 필수값이 아니지만,

가능하면 반드시 입력하는 것이 좋습니다.

See the Pen 배열 by anna (@hianna) on CodePen.

 

reduce() 함수의 초기값이 지정되지 않으면, 

reduce() 함수는, 배열의 첫번째 값을 처리할 때

accumulator(위 예제에서는 sum) 값으로 배열의 첫번째 값(arr[0])을 세팅합니다.

그런데, 위 예제의 케이스에는 빈 배열이 전달되었으므로, arr[0]은 잘못된 접근이기 때문에, 에러가 발생합니다.

만약 같은 경우에, 초기값(initialValue)을 지정하면,

reduce() 함수는, 배열의 첫번째 값을 처리할 때

accumulator(위 예제에서는 sum) 값으로 initialValue를 지정하기 때문에 에러가 발생하지 않습니다.

 

3. reduce() 함수로 배열의 평균 구하기

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

reduce() 함수를 사용하여 배열 element의 합을 구하고, 

그 결과를 배열의 길이로 나누어서 배열 element의 평균값을 계산하였습니다.

 

4. reduceRight()

arr.reduceRight(callback(accumulator, currentValue [, currentIndex[, array]]) [, initialValue])

reduceRight() 함수는 reduce() 함수와 기능은 동일하고, 배열의 오른쪽부터 연산을 수행합니다.

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

reduceRight() 함수를 사용하여 배열의 끝에서부터 앞까지의

문자열 element를 이어붙였습니다.

 

---

 

reduce(), reduceRight() 함수를 이용하여, 값을 누적 계산하는 방법을 알아보았습니다.