JavaScript reduce()로 배열의 최솟값과 최댓값을 한 번에 구하는 방법

문제 상황

다음과 같은 숫자 배열이 주어졌다고 가정해 보겠습니다.

const arr = [12, 54, 6, 23, 87, 4, 545, 7, 65, 18, 87, 8, 76];

이 배열에서 최솟값과 최댓값을 각각 추출하여, 인덱스 0에는 최솟값을, 인덱스 1에는 최댓값이 위치한 새로운 배열을 반환하는 함수를 작성해야 합니다.

해결 방법: Array.prototype.reduce() 활용

reduce() 메서드를 사용하면 배열을 한 번만 순회하면서 최솟값과 최댓값을 동시에 계산할 수 있습니다. 초기 누적값을 [Infinity, -Infinity]로 설정하고, 각 요소를 비교하며 값을 갱신하는 방식입니다.

예제 코드

const arr = [12, 54, 6, 23, 87, 4, 545, 7, 65, 18, 87, 8, 76];

const minMax = (arr) => {
   return arr.reduce((acc, val) => {
      if (val < acc[0]) {
         acc[0] = val;
      }
      if (val > acc[1]) {
         acc[1] = val;
      }
      return acc;
   }, [Infinity, -Infinity]);
};

console.log(minMax(arr));

동작 원리

이 코드의 핵심 로직은 다음과 같습니다.

• 누적값 acc의 첫 번째 요소는 현재까지의 최솟값을, 두 번째 요소는 현재까지의 최댓값을 저장합니다.
• 현재 값 val이 저장된 최솟값보다 작으면 최솟값을 갱신하고, 저장된 최댓값보다 크면 최댓값을 갱신합니다.
• 초기값으로 [Infinity, -Infinity]를 사용하기 때문에 어떤 숫자와 비교하더라도 첫 번째 요소부터 정확하게 갱신됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[ 4, 545 ]

배열에서 가장 작은 값인 4가 인덱스 0에, 가장 큰 값인 545가 인덱스 1에 올바르게 배치된 것을 확인할 수 있습니다.

마무리

reduce() 메서드를 활용하면 별도의 반복문 없이 단일 순회로 최솟값과 최댓값을 효율적으로 추출할 수 있습니다. 이 패턴은 통계 계산이나 데이터 분석 등 다양한 상황에서 유용하게 활용할 수 있습니다.