[ Javascript ] reduce() method

최근 reduce()를 사용하는 일이 나오기 시작했는데 제대로 사용을 못하는 문제로 인하여 작성하게 된 글입니다.

javascript에서 reduce()는 반복 프로세스를 통해서 배열을 단일 값으로 축소하는 데 사용됩니다.

누적기와 함께 배열의 각 요소에 제공된 콜백 함수를 적용하고 단일 누적 결과를 반환해줍니다.

 

구문

array.reduce(callback, initialValue);

• array: 축소 시키려는 배열입니다.
• callback: 배열의 각 요소에 대해 호출되는 함수로 4개의 인수를 사용합니다.
  - accumulator: 이전 반복의 누적된 결과입니다.
  - currentValue: 현재 처리 중인 요소입니다.
  - currentInext: (선택사항) 처리 중인 요소의 현재 인덱스입니다.
  - array: (선택사항) 호출된 배열입니다. reduce
• initialValue: (선택사항) 누산기의 초기 값입니다. 제공되지 않으면 배열의 첫 번째 요소가 초기 누산기 값으로 사용되고 두 번째 요소부터 반복이 시작됩니다.

 

작동방식

1. initialValue 초기 값이 들어옵니다 ( 없으면 배열의 첫 번째 요소가 초기 값이 됩니다. )

2. initialValue 콜백 함수는 두 번째 요소( 또는 제공되지 않았을 경우 첫 번째 요소 )부터 시작해서 각 요소에 대해 호출됩니다.

3. 각 반복에서 콜백 함수는 현재 accumulator값, currentValue 처리중인 요소의 선택적으로 currentIndex및 array 자체를 받습니다.

4. accumulator콜백 함수는 다음 반복에서 새로운 값이 될 값을 반환해야 합니다.

5. reduce() 메서드는 계속해서 배열을 반복하면서 각 요소에 콜백 함수를 적용하고 그에 따라 누산기를 업데이트 합니다.

6. 모든 요소가 처리되면 최종 누산기 값이 작업 결과로 반환됩니다.

 

.js ( 더하기 )

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

const sum = num.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 15

 

.js ( 곱하기 )

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

const product = num.reduce((acc, current) => {
    return acc * current
}, 1);

console.log(product); // 120

 

.js ( 배열 합치기 )

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

const newArr = arr.reduce((acc, current) => {
    return acc.concat(current);
}, []);

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

 

.js ( 중복 횟수 )

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];

const fruitCount = fruits.reduce((acc, current) => {
    acc[current] = (acc[current] || 0) + 1;

    return acc;
}, {});

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

 

.js ( 그룹화 )

const students = [
    { name: "Alice", grade: "A" },
    { name: "Jun", grade: "B" },
    { name: "shiro", grade: "A" }
];

const groupByGrade = students.reduce((acc, student) => {
    const grade = student.grade;
    acc[grade] = (acc[grade] || []).concat(student);

    return acc;
}, {});

console.log(groupByGrade);
/*
{
    A: [ { name: "Alice", grade: "A" }, { name: "Shiro", grade: "A" } ],
    B: [ { name: "Jun", grade: "B" } ]
}
*/

 

.js ( 최대값 찾기 )

const num = [10, 5, 8, 20, 15];

const max = num.reduce((acc, current) => {
    return Math.max(acc, current);
}, -Infinity);

console.log(max); // 20

 

.js ( 문자열 결합하기 )

위와 아래 차이는 첫번째 글자에 공백이 들어가냐 안들어가냐 차이입니다.

const words = ["Hello", "World", "!!!"];

const sentence = words.reduce((acc, current) => {
    return acc + " " + current;
}, "");

console.log(sentence); //  Hello World !!!


//----------//

const words = ["Hello", "World", "!!!"];

const sentence = words.reduce((acc, current) => {
    return acc + " " + current;
});

console.log(sentence); // Hello World !!!

 

.js ( 초기 값을 사용한 데이터 변환 )

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

const result = data.reduce((acc, current) => {
    acc[current] = current * 2;

    return acc;
}, {})

console.log(result); // { 1: 2, 2: 4, 3: 6, 4: 8, 5: 10 }

 

reduce() 메서드를 사용하면 위처럼 다양한 활용이 가능합니다.

그러나 한편으로는 배열 크기와 제공하는 콜백 함수의 복잡성에 따라 잘 생각하고 사용해야 합니다.

 

1. 배열 크기: 매우 큰 배열에 적용할 경우 reduce()메서드의 반복 특성으로 인해 성능 문제가 발생할 수 있으며, 콜백 함수의 계산 비용이 많이 드는 경우 더욱 그렇습니다.

2. 콜백 함수: 콜백 함수의 복잡성은 성능에 영향을 미칠 수 있습니다. 콜백 함수가 비용이 많이 드는 작업을 수행하거나 시간 복잡도가 높은 경우 코드 속도가 느려질 수 있습니다.

3. 가독성 및 유지 관리 용이성: reduce()메서드는 많은 작업을 위한 강력한 도구지만 코드 가독성과 유지 관리용이성을 우선시하는 것이 중요합니다. 정말 간단한 작업에 사용한다면 코드가 덜 명확해 질 수 있습니다.