[javascript] 자바스크립트 reduce() 함수

reduce( )

JavaScript에서 reduce 함수는 배열의 요소를 순차적으로 순회하면서 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환한다.

배열 요소의 순회는 initialValue에 설정 유무에 따라 순회를 시작하는 index 0부터 시작할수도 있고 index 1부터 시작할수도 있다.

주로 배열 요소의 합계를 계산하는데 사용 되며, 배열 또는 객체로 반환할 수도 있다.

<script>
	arr.reduce(callback(accumulator, currentValue, index, array), initialValue)
</script>

arr

• 순회하고자 하는 배열

accumulator

• 누적되는 값

• callback 함수의 반환값을 누적

• initialValue를 설정한 경우 callback의 최초 호출시 initialValue로 값으로 초기화

• initialValue가 없을 경우 arr의 0번째 인덱스 값으로 초기화

currentValue

• 현재 배열의 요소

index(생략 가능)

• 현재 배열 요소의 index

array(생략 가능)

• reduce 함수를 호출한 배열

initialValue(생략 가능)

• 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생한다.

1. 배열의 모든 값 더하기

<script>
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum1 = numbers.reduce((accumulator, currentNumber) => 
accumulator + currentNumber);

// sum1 = 55
</script>

2. 오브젝트에서 원하는 항목의 값만 더하기

<script>
const friends = [
  {
    name: 'yong',
    age: 32,
  },
  {
    name: 'jhon',
    age: 32,
  },
  {
    name: 'park',
    age: 32,
  }
];

// 초기값 설정이 반드시 필요함
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
}, 0);

// ageSum = 96

</script>