본문 바로가기
개발공부_Blog/JavaScript

Array.reduce():누적의 결과를 출력한다

by 소팡팡 2022. 10. 31.

reduce메서드는

콜백함수와 초기값을 전달받아 자신을 호출한 모든 요소를 누적한 결과를 반환한다.

 

reduce메서드의 네 가지 인수

  • accumulate : 초기값 또는 콜백함수의 반환값 (누산된 값)
  • currentValue : reduce를 호출한 배열의 현재 요소값
  • index : 현재 요소의 인덱스
  • array : reduce를 호출한 원본 배열

 

아래 예제는 초기값0으로 시작해 콜백함수의 결과값을 전달받아 배열의 모든 요소를 누적한 결과를 반환한다.

const sum = [1,2,3,4].reduce((accumulator, currentValue, index, array) => 
	accumulator + currentValue, 0)

 

구분 콜백함수에 전달되는 인수 반환값
acc + cur
accumulate currentValue index array
첫 번째 순회 0 (초기값 설정) 1 0 [1,2,3,4] 1
두 번째 순회 1 2 1 [1,2,3,4] 3
세 번째 순회 3 3 2 [1,2,3,4] 6
네 번재 순회 6 4 3 [1,2,3,4] 10

 

// 간단예시

let arr = [1,2,3,4]

function solution(arr) {
  var answer = 0;
  const sum = arr.reduce((a,b)=>a+b)
  answer = sum/arr.length
  return answer;
}

solution(arr)

arr에 있는 배열원소를 a,b에 대입해 순서대로 덧셈을 한다.

배열을 돌면서 결과값을 출력한다. 초기값이 설정되어 있지 않기 때문에

1. a에는 첫 번재 요소, b에는 두 번째 요소

2. a에는 1+2의 결과값이 들어가고, b에는 세번재 배열 요소값(3)이 들어간다

3. a에는 1+2+3의 결과값이 들어가고, b에는 마지막 배열 요소값 (4)가 들어가 계산된다.

 

reduce메서드는 초기값과 콜백함수의 반환값을 다시 콜백함수의 인수로 전달하면서 

모든 배열을 순회하고 하나의 결과값을 반환한다. 

 

reduce는 숫자의 합산 뿐만 아니라 다양한 결과값의 누적을 반환할 수 있다. 

 

 

 

댓글