자바스크립트 reduce 메서드 사용 방법

reduce 메서드란?

자바스크립트의 reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 이 메서드는 배열 내의 숫자를 합치거나, 객체 내의 값들을 결합하는 등 다양한 방식으로 데이터를 축소하는 데 유용합니다.

 

 

reduce 메서드의 구조

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 로직 실행
}, initialValue);

 

• accumulator : 이전에 호출된 콜백의 반환값이 누적되어 저장됩니다. 첫 번째 호출에서는 initialValue가 주어진 경우 그 값이, 아니면 배열의 첫 번째 요소가 됩니다.
• currentValue : 처리할 현재 요소의 값입니다.
• currentIndex(선택적) : 처리할 현재 요소의 인덱스입니다. initialValue가 주어진 경우 0부터 시작하고, 아니면 1부터 시작합니다.
• array(선택적) : reduce 메서드를 호출한 배열입니다.
• initialValue(선택적) : accumulator의 첫 번째 호출에 제공되는 값으로, 제공되지 않은 경우 배열의 첫 번째 요소를 사용합니다.

 

 

리듀서(reducer) 함수란?

리듀서 함수는 reduce 메서드에 의해 호출되는 콜백 함수로, 배열의 각 요소를 순회하면서 특정 작업을 수행합니다. 이 함수는 주로 배열을 기반으로 값을 축소하거나 결합하여 하나의 결과값을 생성하는 데 사용됩니다. 리듀서 함수의 목적은 accumulator와 currentValue를 어떻게 결합할지 정의하는 것입니다. 그리고 배열의 모든 요소를 순회한 후 최종적으로 accumulator 값을 반환합니다.

 

 

map과 reduce의 차이점

map 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 함수의 반환값으로 구성된 새 배열을 생성합니다. map 메서드는 배열의 각 요소를 변환하는 데 사용됩니다. 각 요소는 독립적으로 처리되며, 원본 배열과 동일한 길이의 새 배열을 반환합니다.

reduce 메서드는 배열의 각 요소에 대해 리듀서 함수를 실행하고, 단일 결과값을 반환합니다. reduce 메서드는 배열 내의 값들을 하나로 축소하는 데 사용됩니다. 예를 들어, 숫자 배열의 합계나 평균을 계산하거나 배열 내 객체의 값들을 결합할 때 유용합니다.

 

 

reduce 메서드 사용 방법

reduce 메서드는 단순히 숫자를 합하는 것 이상으로, 다양한 방식으로 사용될 수 있습니다. 배열을 기반으로 복잡한 데이터 처리와 변환을 수행할 때 매우 유용한 메서드입니다. 아래는 reduce 메서드의 다양한 사용 방법들입니다.

 

 

1) 숫자 배열의 합계

 

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, current) => acc + current, 0);
console.log(total); // 출력: 15

 

reduce 메서드를 사용하여 숫자 배열의 모든 요소를 합산하는 방법입니다. 초기값을 0으로 설정하여, 각 요소를 순회하며 누적값에 더하는 식으로 총합을 구합니다.

 

 

2) 객체 배열에서 특정 속성의 합계 계산

const products = [
  { name: 'Product A', price: 100 },
  { name: 'Product B', price: 150 },
  { name: 'Product C', price: 200 }
];
const totalCost = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalCost); // 출력: 450

 

reduce 메서드를 이용해 객체 배열 내 특정 속성(price)의 합계를 계산합니다. 각 객체의 price 값을 누적값에 더함으로써 전체 비용을 산출합니다.

 

 

3) 배열 내 문자열의 빈도수 계산

const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const wordCount = words.reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {});
console.log(wordCount);
// 출력: { apple: 3, banana: 2, orange: 1 }

 

reduce 메서드를 이용해 문자열 배열에서 각 문자열의 등장 빈도수를 계산하는 방법입니다. 초기값을 빈 객체로 설정합니다. 빈 객체에서 키에는 각 문자열을, 값에는 해당 키의 등장 횟수를 저장합니다.

 

 

4) 배열의 요소를 하나의 문자열로 결합1

const numbers = [1, 2, 3, 4, 5];
const concatenatedNumbers = numbers.reduce((acc, number) => acc + number, "");
console.log(concatenatedNumbers); // 출력: "12345"

 

숫자 배열의 요소를 순회하며 reduce 메서드를 통해 이들을 문자열로 연결합니다. 이 과정에서 배열의 각 숫자가 문자열로 변환되어 하나의 문자열로 합쳐집니다.

 

 

5) 배열의 요소를 하나의 문자열로 결합2

const numbers = [1, 2, 3, 4, 5];
const reducedAndJoined = numbers.reduce((acc, number, index, array) => {
  const separator = index < array.length - 1 ? ", " : "";
  return `${acc}Number: ${number}${separator}`;
}, "");
console.log(reducedAndJoined); // 출력: "Number: 1, Number: 2, Number: 3, Number: 4, Number: 5"

 

reduce 메서드를 사용하여 배열의 각 요소를 변환하고, 이를 특정 패턴의 문자열로 결합하는 방법을 보여줍니다. 배열의 마지막 요소를 제외하고, 각 요소 뒤에 쉼표와 공백을 추가하여 문자열을 구성합니다. reduce 메서드는 map과 join을 조합해야 가능한 작업을 단독으로 수행할 수 있습니다.