JavaScript 배열 객체 순회하며 특정 속성 합계 구하는 방법

JavaScript를 다루다 보면 객체로 이루어진 배열에서 특정 속성값을 모두 더해야 하는 경우가 자주 발생합니다. 예를 들어, 여러 항목의 duration 값을 합산해 총 시간을 구하는 상황이 대표적입니다.

문제 상황

다음과 같이 여러 개의 객체를 담고 있는 배열이 있다고 가정해 보겠습니다.

const arr = [
    {
        duration: 10,
        any: 'fields'
    }, {
        duration: 20,
        any: 'other fields'
    }, {
        duration: 15,
        any: 'some other fields'
    }
];

여기서 우리가 작성해야 할 함수는 이 배열을 인자로 받아, 모든 객체의 duration 속성값을 합산한 결과를 반환하는 것입니다.

위 배열의 경우 각 객체의 duration 값이 10, 20, 15이므로 기대되는 출력 결과는 45입니다.

해결 방법 1: for 반복문 사용

가장 기본적인 방법은 for 반복문으로 배열을 순회하면서 각 객체의 속성값을 누적하는 것입니다.

const arr = [
    {
        duration: 10,
        any: 'fields'
    }, {
        duration: 20,
        any: 'other fields'
    }, {
        duration: 15,
        any: 'some other fields'
    }
];
const addDuration = arr => {
    let res = 0;
    for(let i = 0; i < arr.length; i++){
        res += arr[i].duration;
    };
    return res;
};
console.log(addDuration(arr));

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

45

해결 방법 2: reduce() 메서드 활용

더 간결하고 함수형 프로그래밍 스타일로 작성하고 싶다면 배열의 reduce() 메서드를 사용할 수 있습니다.

const addDuration = arr =>
    arr.reduce((sum, item) => sum + item.duration, 0);

console.log(addDuration(arr)); // 45

reduce()는 배열의 각 요소를 순회하며 누산기(accumulator)에 값을 누적합니다. 두 번째 인자인 0은 초기값을 의미하므로, 빈 배열이 들어와도 안전하게 0을 반환합니다.

정리

배열 내 객체의 특정 속성을 합산할 때는 for 반복문이나 reduce() 메서드 모두 활용할 수 있습니다. 코드의 가독성과 유지보수성을 고려한다면 reduce()를 사용하는 것이 일반적으로 더 권장됩니다.