JavaScript의 내장 함수 - reduce()

reduce 함수는 JavaScript 배열에서 강력하고 유용한 고차 함수로, 배열의 모든 요소를 단일 값으로 결합하는 데 사용됩니다. 이를 통해 배열을 순회하며 누적 값을 생성할 수 있으며, 다양한 용도로 활용할 수 있습니다. 특히 숫자 합계, 객체 생성, 배열 병합 등의 작업에 매우 유용합니다.

1. reduce 함수의 기본 구조

reduce 함수는 두 개의 인수를 받습니다:

• 콜백 함수: 배열의 각 요소에 대해 실행될 함수
• 초기 값: 선택 사항으로, 누적 값의 초기 값을 설정합니다

콜백 함수는 다음 네 개의 인수를 받습니다:

1. 누적 값(accumulator): 이전 함수 호출에서 반환된 값입니다.
2. 현재 값(currentValue): 현재 배열 요소입니다.
3. 현재 인덱스(index) (선택 사항): 현재 배열 요소의 인덱스입니다.
4. 배열(array) (선택 사항): reduce를 호출한 배열 자체입니다.

const result = array.reduce((accumulator, currentValue, index, array) => {
  // 콜백 함수 내용
}, 초기값);

2. reduce 함수의 작동 방식

배열의 첫 번째 요소부터 마지막 요소까지 차례대로 콜백 함수가 호출되며, 매 호출마다 누적 값이 갱신됩니다. 초기 값이 제공되면 첫 번째 요소와 함께 콜백 함수가 실행되고, 그렇지 않으면 배열의 첫 번째 요소가 초기 값이 됩니다.

3. 예제 1: 배열의 합 계산

가장 흔히 사용하는 예로, 배열의 모든 숫자의 합계를 계산하는 경우를 들 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 출력: 15

이 예제에서 reduce는 초기 값을 0으로 설정하고 배열의 각 요소를 순차적으로 더하여 결과 값을 반환합니다.

4. 예제 2: 배열의 최대값 찾기

배열에서 최대값을 찾는 것도 reduce로 쉽게 구현할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce(
  (acc, curr) => (acc > curr ? acc : curr),
  numbers[0]
);

console.log(max); // 출력: 5

이 예제에서는 누적 값과 현재 값을 비교하여 더 큰 값을 반환합니다. 초기 값은 배열의 첫 번째 요소로 설정되었습니다.

5. 예제 3: 객체 배열에서 속성 값 합계 구하기

객체 배열에서 특정 속성의 합계를 구하는 작업도 가능합니다. 예를 들어, 사람들의 나이 합계를 구하는 경우를 살펴봅시다.

const people = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Jack", age: 35 },
];

const totalAge = people.reduce((acc, person) => acc + person.age, 0);

console.log(totalAge); // 출력: 90

이 예제에서는 객체 배열에서 각 객체의 age 속성 값을 누적하여 합계를 계산했습니다.

6. 예제 4: 중첩 배열 평탄화

reduce는 중첩된 배열을 평탄화(즉, 단일 배열로 변환)하는 데에도 유용하게 사용됩니다.

const nestedArray = [
  [1, 2],
  [3, 4],
  [5, 6],
];
const flatArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);

console.log(flatArray); // 출력: [1, 2, 3, 4, 5, 6]

이 예제에서는 각 배열을 순회하며 concat 함수를 사용해 배열을 결합하여 평탄화된 단일 배열을 만들었습니다.

7. 예제 5: 객체로 배열 구성하기

배열을 객체로 변환하여 특정 값에 따라 그룹화하는 작업도 가능합니다. 예를 들어, 사람들을 나이별로 그룹화하는 경우를 생각해봅시다.

const people = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Jack", age: 30 },
  { name: "Jill", age: 25 },
];

const groupedByAge = people.reduce((acc, person) => {
  const key = person.age;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(person.name);
  return acc;
}, {});

console.log(groupedByAge);
// 출력: { '25': ['Jane', 'Jill'], '30': ['John', 'Jack'] }

이 예제에서는 age를 키로 사용하여 사람들의 이름을 배열로 저장한 객체를 만들었습니다.

8. reduce의 장점과 주의사항

• 장점: reduce는 배열의 모든 요소를 단일 값으로 결합하는 강력한 기능을 제공합니다. 배열의 합계 계산, 중첩 배열 평탄화, 객체 변환 등 여러 작업을 간단하게 처리할 수 있습니다.
• 주의사항: reduce를 사용할 때는 코드의 가독성을 주의해야 합니다. 복잡한 작업을 reduce로 처리할 경우 코드가 이해하기 어려울 수 있습니다. 이럴 때는 적절한 주석을 달거나, 복잡한 로직은 별도의 함수로 분리하는 것이 좋습니다.

9. 결론

JavaScript의 reduce 함수는 다양한 방식으로 배열을 처리할 수 있는 매우 강력한 도구입니다. 배열의 요소를 누적하여 단일 값으로 축소하는 기능은 다양한 상황에서 유용하게 활용될 수 있습니다. 다만, reduce가 모든 문제를 해결하는 만능 도구는 아니므로, 상황에 맞게 적절히 사용하는 것이 중요합니다.