Fundamentals/JavaScript
reduce() 메소드
sod0l
2024. 9. 13. 12:15
`reduce()` 는 배열의 각 요소를 순회하면서 값을 누적해 나가는 메소드이다. 이 메소드는 배열을 단일 값으로 축소하는데 사용한다.
기본적으로 두 가지 인자가 필요하다.
- 누적 함수(accumulator function): 각 요소를 처리하면서 누적값을 계산하는 함수이다.
- 초기값(initial value): 누적 계산을 시작할 때 사용할 초기 값이다.
1. `reduce()` 메소드의 기본 구조
array.reduce((accumulator, currentValue, currentIndex, array) => {
// 누적값(accumulator)과 현재값(currentValue)을 사용하여 계산을 수행한다.
return newAccumulatorValue;
}, initialValue);
파라미터 설명
- 누적 함수(accumulator function):
- `accumulator`: 현재까지의 누적값이다. 처음에는 `initialValue`로 시작한다.
- `currentValue`: 현재 배열의 요소이다.
- `currentIndex` (선택적): 현재 요소의 인덱스이다.
- `array` (선택적): `reduce()`를 호출한 배열 자체이다.
- `initialValue`:
- 누적 계산을 시작할 때 사용할 초기값이다. 이 값은 `reduce()` 메소드의 두 번째 인자로 전달된다. 이 값이 없으면 배열의 첫 번째 요소가 초기값으로 사용된다.
2. 사용 예시
예를 들어, 배열 `[1, 2, 3, 4, 5]`의 합계를 구하고 싶다고 가정하자. 이때 `reduce()` 메소드를 다음과 같이 사용할 수 있다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 출력: 15
동작 방식
- 초기값 설정: `reduce()` 메소드는 두 번째 인자인 초기값(이 경우 0)을 사용하여 계산을 시작한다.
- 첫 번째 호출: 배열의 첫 번째 요소(1)와 초기값(0)을 누적 함수에 전달한다. `(0 + 1)`의 결과로 1이 된다.
- 두 번째 호출: 두 번째 요소(2)와 누적값(1)을 누적 함수에 전달한다. `(1 + 2)`의 결과로 3이 된다.
- 세 번째 호출: 세 번쨰 요소(2)와 누적 값(3)을 누적함수에 전달한다. `(3 + 3)`의 결과로 6이 된다.
- 이 과정을 배열의 모든 요소에 대해 반복: 마지막에는 `(10 + 5)`로 15가 되어, 최종 결과가 15가 된다.
주요 부분
- 누적값(acc): 현재까지 누적된 값이다. 처음에는 초기값으로 시작한다.
- 현재값(curr): 배열의 현재 요소이다.
- 결과값: 최종적으로 배열의 모든 요소가 처리된 후의 값이다.
const numberSum = numbers.reduce((acc, curr) => acc + curr, 0);
- `numbers.reduce((acc, curr) => acc + curr, 0)`는 배열 `numbers`의 모든 요소를 합산하여 `numbersSum`에 저장한다.
- `(acc, curr) => acc + curr`는 각 배열 요소를 더하는 함수이다.
- `0`은 누적 계산의 시작점으로, 배열의 합계를 구할 때 0에서 시작한다.
이렇게 해서 배열의 모든 요소를 한 번씩 순회하며, 각 요소를 누적값에 더하는 과정이 이루어진다. 결과적으로 배열의 모든 요소의 합이 계산된다.