Javascript에서 배열 합성과 가공을 하는 reduce 메서드

reduce는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하면서 하나의 값을 누적하는 메서드이다. 이를 통해 배열의 요소들을 단일 값으로 축소할 수 있다.

 

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);

 

callback : 각 요소에 대해 실행할 함수로, 네 개의 인자를 받는다.
accumulator : 누적된 값.
currentValue : 현재 배열의 요소.
currentIndex : 현재 배열의 인덱스.
array : 메서드가 호출된 배열.
initialValue : 누적 값의 초기값으로, 생략할 수 있다.

 

 

const numbers = [1, 2, 3, 4, 5];

// 배열의 모든 요소를 누적하여 합산
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 출력: 15

 

reduce는 초기값 0을 가지는 accumulator를 사용하여 배열의 각 요소를 더해 최종적으로 합산된 값을 반환한다. reduce를 사용하면 배열의 각 요소를 가공하거나, 특정 조건을 만족하는 요소를 필터링하거나, 배열을 평탄화하거나 다양한 작업을 수행할 수 있다.

 

 

reduce 활용 

 

1) 배열 합계 또는 평균 계산

const numbers = [10, 20, 30, 40, 50];

// 배열의 합계 계산
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 출력: 150

// 배열의 평균 계산
const average = numbers.reduce((accumulator, currentValue, index, array) => {
  accumulator += currentValue;
  if (index === array.length - 1) {
    return accumulator / array.length;
  }
  return accumulator;
}, 0);
console.log(average); // 출력: 30

 

 

2) 배열 요소의 최댓값 또는 최솟값 찾기

const numbers = [5, 8, 2, 1, 9];

// 배열의 최댓값 찾기
const max = numbers.reduce((maxValue, currentValue) => Math.max(maxValue, currentValue), -Infinity);
console.log(max); // 출력: 9

// 배열의 최솟값 찾기
const min = numbers.reduce((minValue, currentValue) => Math.min(minValue, currentValue), Infinity);
console.log(min); // 출력: 1

 

 

3) 객체 속성 합산

const orders = [
  { product: 'Laptop', price: 1000 },
  { product: 'Phone', price: 500 },
  { product: 'Tablet', price: 300 },
];

// 주문의 총 가격 계산
const totalPrice = orders.reduce((accumulator, order) => accumulator + order.price, 0);
console.log(totalPrice); // 출력: 1800

 

 

4) 배열 평탄화 (Flatten)

const nestedArray = [[1, 2], [3, 4], [5, 6]];

// 중첩된 배열을 평탄화
const flattenedArray = nestedArray.reduce((accumulator, currentArray) => accumulator.concat(currentArray), []);
console.log(flattenedArray); // 출력: [1, 2, 3, 4, 5, 6]

 

 

5) 조건에 따른 필터링

const numbers = [10, 20, 30, 40, 50];

// 짝수만 필터링
const evenNumbers = numbers.reduce((accumulator, currentValue) => {
  if (currentValue % 2 === 0) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(evenNumbers); // 출력: [10, 20, 30, 40, 50]

 

 

reduce 메서드는 JavaScript에서 매우 유용하고 강력한 배열 메서드 중 하나이며, 많은 경우에 사용되는데

데이터 처리, 통계 계산, 필터링, 그룹화, 변환 등의 작업에서 활용된다.