JavaScript에서 객체 배열을 속성 값 기반의 새 배열로 변환하는 방법

JavaScript 개발을 하다 보면 객체 배열을 다른 형태의 배열로 변환해야 하는 경우가 자주 발생합니다. 이번 글에서는 각 객체가 가진 특정 속성 값을 기반으로 새로운 배열을 만드는 방법을 코드 예제와 함께 살펴보겠습니다.

문제 상황

예를 들어, 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [{
    country: "canada",
    count: 2
}, {
    country: "jamaica",
    count: 2
}, {
    country: "russia",
    count: 1
}, {
    country: "india",
    count: 3
}, {
    country: "spain",
    count: 2
}, {
    country: "portugal",
    count: 1
}, {
    country: "italy",
    count: 1
}];

여기서 우리가 작성해야 할 함수는 이 배열을 순회하면서, 각 객체의 country(국가 이름)를 해당 객체의 count 횟수만큼 반복해 하나의 문자열 배열로 반환하는 함수입니다.

따라서 위 배열에 대해 이 함수를 실행하면 다음과 같은 결과가 나와야 합니다.

['canada', 'canada', 'jamaica', 'jamaica', 'russia', 'india', 'india', 'india', 'spain', 'spain', 'portugal', 'italy']

reduce() 메서드를 활용한 해결 방법

이 문제는 Array.prototype.reduce() 메서드를 사용하면 깔끔하게 해결할 수 있습니다. reduce()는 배열을 순회하면서 누적값(accumulator)을 만들어 가는 방식으로 동작하기 때문에, 여러 객체의 데이터를 하나의 배열로 합치는 작업에 특히 적합합니다.

코드 예제

const arr = [{
    country: "canada",
    count: 2
}, {
    country: "jamaica",
    count: 2
}, {
    country: "russia",
    count: 1
}, {
    country: "india",
    count: 3
}, {
    country: "spain",
    count: 2
}, {
    country: "portugal",
    count: 1
}, {
    country: "italy",
    count: 1
}];
const repeatCount = (arr) => {
    return arr.reduce((acc, val) => {
        let { count, country } = val;
        while(count--){
            acc.push(country);
        }
        return acc;
    }, []);
};
console.log(repeatCount(arr));

코드 동작 원리

1. reduce()의 초기값으로 빈 배열 []을 지정합니다.
2. 각 객체에서 구조 분해 할당(destructuring)을 통해 country와 count 값을 추출합니다.
3. while(count--) 루프를 사용해 count 횟수만큼 국가 이름을 누적 배열에 추가합니다.
4. 모든 객체에 대한 처리가 끝나면 완성된 배열이 최종적으로 반환됩니다.

실행 결과

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

[
    'canada', 'canada',
    'jamaica', 'jamaica',
    'russia', 'india',
    'india', 'india',
    'spain', 'spain',
    'portugal', 'italy'
]

더 간결한 대안: flatMap()

ES2019부터 지원되는 flatMap()을 사용하면 같은 로직을 훨씬 더 간결하게 표현할 수 있습니다. 각 객체를 count 길이만큼 채운 배열로 매핑한 뒤 자동으로 평탄화(flatten)해 주기 때문입니다.

const repeatCount = (arr) =>
    arr.flatMap(({ country, count }) => Array(count).fill(country));

console.log(repeatCount(arr));

상황에 따라 reduce() 방식은 세부적인 제어가 필요할 때 유용하고, flatMap() 방식은 코드의 가독성과 간결함이 중요할 때 좋은 선택이 됩니다. 두 방법 모두 실무에서 객체 배열을 변환할 때 자주 활용되는 패턴이니 익혀두면 큰 도움이 될 것입니다.