Array.prototype.reduce()에 대한 학습

reduce 사전적 의미 : 줄이다... 값을 하나로 만들기 위해서 reduce! reduce! reduce!한다는 의미로 이해했다.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

reduce 함수는 4개의 인자를 가진다.
1. acc 누산기 = previousValue
2. cur 현재값 = currentValue
3. idx 현재 인덱스 = (Optional) currentIndex
4. src 원본 배열 = (Optional) array

reduce 함수의 반환값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 최종 결과는 하나의 값이 된다.
즉, 함수 실행으로 하나의 결과값을 반환

1. acc 누산기란?
   accumulator로 누산기는 콜백 함수가 호출될 때마다 쌓이거나 누적되는 값이다.
   reduce() 메서드가 처음 호출될 때 사용할 초기값 (initial value)로 설정된다. 초기값을 명시하지 않으면 첫번째 요소가 초기값이 된다.
   콜백 함수에서 반환하는 값은 다음 호출에 사용될 누산기의 값이 된다.

2. cur 현재값?
   현재 배열을 순회하며 처리되는 요소.
   각 순회마다 현재 요소는 배열의 한 요소를 의미.
   콜백 함수가 호출될 때마다 현재 요소가 변경됨.

reduce 함수의 기본 문법

arr.reduce(callbackfn(previousValue, currentValue, currentIndex, array), initialValue);
// 배열.reduce(callbackfn(누산기, 현재값, 현재인덱스, 원본배열), 초기값);

예제로 알아보자

1. 배열의 합 구하기

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

2. 배열의 최댓값 구하기

const numbers = [10, 20, 5, 8, 30];
const max = numbers.reduce((acc, curr) => Math.max(acc, curr), -Infinity);
console.log(max); // 출력 결과: 30

-Infinity를 초기값으로 사용하는 이유는 만약 배열의 모든 값이 음수인 경우에 초기값을 0으로 설정하면 오류가 발생하기 때문

3. 배열의 평균 구하기

const numbers = [10, 20, 30, 40, 50];
const average = numbers.reduce((acc, curr, index, array) => {
    acc += curr;
    if (index === array.length - 1) {
        return acc / array.length;
    } else {
        return acc;
    }
}, 0);
console.log(average); // 출력 결과: 30

4. 배열의 중복 제거하기

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

5. 객체 배열에서 속성값 합산하기

const products = [
    { name: 'Apple', price: 1000 },
    { name: 'Banana', price: 500 },
    { name: 'Orange', price: 1500 }
];
const totalPrice = products.reduce((acc, curr) => acc + curr.price, 0);
console.log(totalPrice); // 출력 결과: 3000

6. 이차원 배열 펼치기

const arrays = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = arrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedArray); // 출력 결과: [1, 2, 3, 4, 5, 6]

7. 배열의 요소 개수 세기

const letters = ['a', 'b', 'c', 'b', 'a', 'c', 'd'];
const letterCount = letters.reduce((acc, curr) => {
    acc[curr] ? acc[curr]++ : acc[curr] = 1;
    return acc;
}, {});
console.log(letterCount); // 출력 결과: { a: 2, b: 2, c: 2, d: 1 }

8. 조건에 맞는 요소 필터링하기

const numbers = [10, 20, 30, 40, 50];
const filteredNumbers = numbers.reduce((acc, curr) => {
    if (curr > 25) {
        acc.push(curr);
    }
    return acc;
}, []);
console.log(filteredNumbers); // 출력 결과: [30, 40, 50]

9. 특정 속성을 가진 객체로 구성된 배열 만들기

const people = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 40 }
];
const names = people.reduce((acc, curr) => {
    acc.push(curr.name);
    return acc;
}, []);
console.log(names); // 출력 결과: ['John', 'Jane', 'Bob']

10. 문자열 뒤집기

const str = 'hello';
const reversedStr = str.split('').reduce((acc, curr) => curr + acc, '');
console.log(reversedStr); // 출력 결과: 'olleh'