Fundamentals/JavaScript

reduce() 메소드

sod0l 2024. 9. 13. 12:15

 

`reduce()` 는 배열의 각 요소를 순회하면서 값을 누적해 나가는 메소드이다. 이 메소드는 배열을 단일 값으로 축소하는데 사용한다.

기본적으로 두 가지 인자가 필요하다.

  1.  누적 함수(accumulator function): 각 요소를 처리하면서 누적값을 계산하는 함수이다.
  2. 초기값(initial value): 누적 계산을 시작할 때 사용할 초기 값이다.

 

 

1. `reduce()` 메소드의 기본 구조

array.reduce((accumulator, currentValue, currentIndex, array) => {
    // 누적값(accumulator)과 현재값(currentValue)을 사용하여 계산을 수행한다.
    return newAccumulatorValue;
}, initialValue);

 

파라미터 설명

  1. 누적 함수(accumulator function):
    • `accumulator`: 현재까지의 누적값이다. 처음에는 `initialValue`로 시작한다.
    • `currentValue`: 현재 배열의 요소이다.
    • `currentIndex` (선택적): 현재 요소의 인덱스이다.
    • `array` (선택적): `reduce()`를 호출한 배열 자체이다.
  2. `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

 

동작 방식

  1. 초기값 설정: `reduce()` 메소드는 두 번째 인자인 초기값(이 경우 0)을 사용하여 계산을 시작한다.
  2. 첫 번째 호출: 배열의 첫 번째 요소(1)와 초기값(0)을 누적 함수에 전달한다. `(0 + 1)`의 결과로 1이 된다.
  3. 두 번째 호출: 두 번째 요소(2)와 누적값(1)을 누적 함수에 전달한다. `(1 + 2)`의 결과로 3이 된다.
  4. 세 번째 호출: 세 번쨰 요소(2)와 누적 값(3)을 누적함수에 전달한다. `(3 + 3)`의 결과로 6이 된다.
  5. 이 과정을 배열의 모든 요소에 대해 반복: 마지막에는 `(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에서 시작한다.

이렇게 해서 배열의 모든 요소를 한 번씩 순회하며, 각 요소를 누적값에 더하는 과정이 이루어진다. 결과적으로 배열의 모든 요소의 합이 계산된다.