javascript reduce 활용

reduce란

 JavaScript에서 배열을 순회하면서 누적된 값을 계산할 수 있게 도와주는 메소드입니다. 이 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하며, 누적된 결과를 반환합니다. 이 함수는 배열을 하나의 값으로 축소(reduce)하는 역할을 합니다.

기본 사용법

reduce() 메서드는 다음과 같은 형태로 사용됩니다

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

• callback: 배열의 각 요소에 대해 실행되는 함수입니다.
  • accumulator: 누적된 값 (처음에는 initialValue로 시작하고, 그 이후에는 이전 단계에서 반환된 값이 사용됩니다).
  • currentValue: 현재 처리되는 배열 요소.
  • currentIndex: 현재 요소의 인덱스 (옵션).
  • array: 원본 배열 (옵션).
• initialValue: accumulator의 초기 값입니다. 생략할 경우 배열의 첫 번째 요소가 initialValue로 사용됩니다.

예시 1: 배열의 합 구하기

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0);
console.log(sum); // 출력: 15

이 예시에서는 reduce()가 배열의 모든 값을 합산합니다. accumulator는 누적된 값을, currentValue는 현재 처리 중인 값을 나타냅니다. initialValue로 0을 전달하여 합산을 시작합니다.

 

예시 2: 배열의 곱 구하기

const numbers = [1, 2, 3, 4, 5];
const product = numbers.reduce((accumulator, currentValue) => { return accumulator * currentValue; }, 1);
console.log(product); // 출력: 120

위의 예시는 배열의 모든 값을 곱한 결과를 출력합니다. initialValue로 1을 전달하여 곱셈을 시작합니다.

예시 3: 배열에서 최대값 찾기

const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((accumulator, currentValue) => { return (currentValue > accumulator) ? currentValue : accumulator; }, -Infinity);
console.log(max); // 출력: 5

이 예시에서는 배열의 값 중 최대값을 찾습니다. initialValue로 -Infinity를 사용하여 배열의 모든 값과 비교가 가능하도록 합니다.

예시 4: 배열을 객체로 변환

배열을 객체로 변환할 때 reduce()를 사용할 수 있습니다.

const fruits = ["apple", "banana", "cherry", "apple", "banana"];
const fruitCount = fruits.reduce((accumulator, fruit) => { accumulator[fruit] = (accumulator[fruit] || 0) + 1; return accumulator; }, {});
console.log(fruitCount); //출력: { apple: 2, banana: 2, cherry: 1 }

이 예시에서는 과일 배열을 객체로 변환하여 각 과일이 몇 번 나오는지 계산합니다. accumulator는 초기값으로 빈 객체 {}를 전달하고, 각 과일을 키로 사용하여 값을 증가시킵니다.

예시 5: 배열에서 중복된 값 제거

배열에서 중복된 값을 제거하는 방법으로 reduce()를 사용할 수 있습니다.

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.reduce((accumulator, currentValue) => { if (!accumulator.includes(currentValue)) { accumulator.push(currentValue); } return accumulator; }, []);
console.log(uniqueNumbers); // 출력: [1, 2, 3, 4, 5]

위 코드에서는 배열에서 중복된 값을 제거합니다. accumulator는 중복된 값을 방지하는 배열로 사용되고, includes()로 이미 포함된 값은 추가하지 않습니다.

예시 6: 다차원 배열을 1차원 배열로 평탄화

다차원 배열을 평탄화하는 데도 reduce()를 사용할 수 있습니다.

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = arr.reduce((accumulator, currentValue) => { return accumulator.concat(currentValue); }, []);
console.log(flattened); // 출력: [1, 2, 3, 4, 5, 6]

위 예시에서는 2차원 배열을 1차원 배열로 평탄화합니다. concat()을 사용하여 currentValue를 accumulator 배열에 이어붙입니다.

예시 7: 배열에서 각 항목의 합계 계산

const items = [ { name: 'apple', price: 10 }, { name: 'banana', price: 5 }, { name: 'orange', price: 7 } ];
const totalPrice = items.reduce((accumulator, item) => { return accumulator + item.price; }, 0);
console.log(totalPrice); // 출력: 22

이 예시에서는 객체 배열에서 각 객체의 price 값을 더하여 총합을 계산합니다.

요약

• reduce()는 배열을 하나의 값으로 축소(reduce)하는 유용한 메소드입니다.
• 누적된 값(accumulator)과 현재 값(currentValue)을 가지고 원하는 방식으로 계산을 할 수 있습니다.
• initialValue를 지정하여 누적 값의 초기 상태를 설정할 수 있습니다.

reduce()는 배열의 모든 요소를 처리하고, 그 결과를 하나의 값으로 반환할 수 있는 매우 강력한 도구입니다. 이를 잘 활용하면 복잡한 배열 작업을 간단하고 효율적으로 처리할 수 있습니다.