[JS] reduce 함수는 어떻게 쓰는걸까?

reduce 함수는 자바스크립트의 배열 메서드 중 하나로, 배열의 모든 요소를 누적(accumulate)하여 단일 값으로 줄이는(reduce) 데 사용됩니다. reduce 함수는 강력하고 유연한 도구로, 배열에서 합계를 계산하거나, 배열을 객체로 변환하거나, 배열의 중복 요소를 제거하는 등 다양한 작업을 수행할 수 있습니다. 이 글에서는 reduce 함수의 기본 개념, 사용 방법, 그리고 실제 예제들을 통해 설명하겠습니다.

---

1. reduce 함수의 기본 개념

reduce 함수는 배열의 각 요소에 대해 사용자 정의 콜백 함수를 실행하고, 그 결과를 누적하여 하나의 최종 값을 반환합니다. 이 콜백 함수는 배열의 각 요소에 대해 실행되며, 다음 네 가지 인자를 가질 수 있습니다.

1. accumulator (누산기): 이전 요소까지의 누적 값입니다. 이 값이 이후의 콜백 실행에서 계속 업데이트됩니다.
2. currentValue (현재 값): 현재 처리 중인 배열 요소의 값입니다.
3. currentIndex (현재 인덱스): 현재 처리 중인 배열 요소의 인덱스입니다. (선택 사항)
4. array (배열): reduce가 호출된 배열 자체입니다. (선택 사항)

reduce 함수는 콜백 함수 외에 초기값(initial value)을 두 번째 인수로 받을 수 있습니다. 이 초기값은 첫 번째 콜백 호출에서 accumulator로 사용됩니다.

const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 10

위의 예제에서 reduce 함수는 배열 [1, 2, 3, 4]의 합계를 계산합니다. 초기값이 0이므로 accumulator는 0부터 시작하여 배열의 각 요소를 더해 최종적으로 10을 반환합니다.

2. reduce 함수의 작동 방식

reduce 함수의 작동 방식을 단계별로 살펴보겠습니다.

const array = [1, 2, 3, 4];
const result = array.reduce((accumulator, currentValue, currentIndex, array) => {
    console.log(`accumulator: ${accumulator}, currentValue: ${currentValue}, currentIndex: ${currentIndex}`);
    return accumulator + currentValue;
}, 0);

console.log(result); // 10

출력은 다음과 같습니다:

accumulator: 0, currentValue: 1, currentIndex: 0
accumulator: 1, currentValue: 2, currentIndex: 1
accumulator: 3, currentValue: 3, currentIndex: 2
accumulator: 6, currentValue: 4, currentIndex: 3

위 예제에서 reduce는 다음과 같은 순서로 동작합니다.

1. 첫 번째 호출: accumulator는 초기값인 0, currentValue는 1입니다. 이들의 합이 1이 되어 다음 단계의 accumulator로 전달됩니다.
2. 두 번째 호출: accumulator는 1, currentValue는 2입니다. 이들의 합이 3이 되어 다음 단계의 accumulator로 전달됩니다.
3. 세 번째 호출: accumulator는 3, currentValue는 3입니다. 이들의 합이 6이 되어 다음 단계의 accumulator로 전달됩니다.
4. 네 번째 호출: accumulator는 6, currentValue는 4입니다. 최종적으로 합이 10이 되어 reduce 함수의 결과로 반환됩니다.

3. 다양한 예제로 알아보는 reduce의 활용

reduce는 다양한 상황에서 유용하게 사용할 수 있습니다. 몇 가지 실용적인 예제를 통해 reduce의 다양한 활용 방법을 살펴보겠습니다.

1) 배열 요소의 합 계산하기

가장 기본적인 예제로, 배열의 요소들을 모두 더하는 방법입니다.

const numbers = [10, 20, 30, 40];
const total = numbers.reduce((sum, number) => sum + number, 0);

console.log(total); // 100

2) 배열에서 중복된 값 제거하기

reduce를 사용하여 배열에서 중복된 값을 제거할 수 있습니다.

const numbers = [1, 2, 3, 4, 3, 2, 1];
const uniqueNumbers = numbers.reduce((acc, number) => {
    if (!acc.includes(number)) {
        acc.push(number);
    }
    return acc;
}, []);

console.log(uniqueNumbers); // [1, 2, 3, 4]

3) 배열을 객체로 변환하기

배열을 객체로 변환하는 작업에도 reduce를 사용할 수 있습니다.

const fruits = [
    { name: 'apple', quantity: 2 },
    { name: 'banana', quantity: 5 },
    { name: 'orange', quantity: 3 }
];

const fruitObject = fruits.reduce((acc, fruit) => {
    acc[fruit.name] = fruit.quantity;
    return acc;
}, {});

console.log(fruitObject); // { apple: 2, banana: 5, orange: 3 }

4) 중첩된 배열 평탄화하기

중첩된 배열을 단일 배열로 평탄화하는 작업도 reduce로 간단하게 수행할 수 있습니다.

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

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

4. reduceRight: 반대로 동작하는 reduce

reduce 함수의 형제격인 reduceRight 함수도 존재합니다. 이 함수는 배열의 우측 끝에서 좌측으로 순회하며 동일한 작업을 수행합니다.

const array = ['a', 'b', 'c'];
const result = array.reduceRight((acc, current) => acc + current);

console.log(result); // 'cba'

reduceRight는 reduce와 거의 동일하게 동작하지만, 순회 방향이 반대입니다. 이로 인해 배열의 요소 순서가 중요한 작업에서 유용하게 사용할 수 있습니다.

5. reduce 사용 시 주의 사항

• 초기값 설정: 초기값을 명시하지 않으면 배열의 첫 번째 요소가 초기값으로 사용됩니다. 따라서 비어 있는 배열에 대해 reduce를 호출할 때는 초기값을 반드시 설정해야 오류가 발생하지 않습니다.
• 불변성 유지: reduce 내에서 원본 배열이나 객체를 직접 수정하지 않도록 주의해야 합니다. 불변성을 유지하는 것은 코드의 예측 가능성을 높이고, 버그 발생을 줄이는 데 도움이 됩니다.

6. 결론

reduce 함수는 자바스크립트에서 매우 강력하고 유연한 도구입니다. 배열의 값을 누적하여 단일 값으로 줄이는 작업 외에도 다양한 형태의 데이터 변환, 필터링, 집계 작업을 수행할 수 있습니다. reduce를 활용하면 코드의 가독성을 높이고, 복잡한 데이터 처리 로직을 간결하게 표현할 수 있습니다.