JavaScript 객체 배열을 속성별 별도 배열로 분리하는 방법

JavaScript로 데이터를 다루다 보면 여러 객체가 담긴 배열에서 특정 속성 값들만 모아 별도의 배열로 분리해야 하는 경우가 자주 발생합니다. 이 글에서는 그러한 작업을 수행하는 함수를 직접 구현해 보겠습니다.

먼저, 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [{
    name : 'Client 1',
    total: 900,
    value: 12000
}, {
    name : 'Client 2',
    total: 10,
    value: 800
}, {
    name : 'Client 3',
    total: 5,
    value : 0
}];

문제 정의

위와 같은 배열을 입력으로 받아, 각 객체 속성별로 값을 모은 별도의 배열을 추출하는 JavaScript 함수를 작성해야 합니다.

즉, name 속성 값들을 모은 배열 하나, total 속성 값들을 모은 배열 하나, value 속성 값들을 모은 배열 하나를 만드는 것입니다. 만약 객체에 더 많은 속성이 존재한다면, 그만큼 더 많은 배열로 분리되어야 합니다.

구현 예제

이 문제를 해결하는 코드는 다음과 같습니다.

const arr = [{
    name : 'Client 1',
    total: 900,
    value: 12000
}, {
    name : 'Client 2',
    total: 10,
    value: 800
}, {
    name : 'Client 3',
    total: 5,
    value : 0
}];
const separateOut = arr => {
    if(!arr.length){
        return [];
    };
    const res = {};
    const keys = Object.keys(arr[0]);
    keys.forEach(key => {
        arr.forEach(el => {
            if(res.hasOwnProperty(key)){
                res[key].push(el[key])
            }else{
                res[key] = [el[key]];
            };
        });
    });
    return res;
};
console.log(separateOut(arr));

코드 동작 원리

이 함수가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. 빈 배열 처리: 입력 배열이 비어 있으면 빈 배열을 즉시 반환하여 오류를 방지합니다.

2. 키 추출: Object.keys(arr[0])를 사용해 첫 번째 객체의 모든 속성 이름(name, total, value)을 가져옵니다.

3. 값 분류: 각 키에 대해 전체 배열을 순회하면서 해당 속성의 값들을 하나의 배열로 모읍니다. hasOwnProperty() 메서드로 결과 객체에 이미 해당 키가 존재하는지 확인한 후, 존재하면 값을 추가하고 없으면 새 배열을 생성합니다.

출력 결과

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

{
    name: [ 'Client 1', 'Client 2', 'Client 3' ],
    total: [ 900, 10, 5 ],
    value: [ 12000, 800, 0 ]
}

이처럼 객체 배열이 속성 이름을 키로 하고, 각 속성 값들의 배열을 값으로 가지는 객체 형태로 깔끔하게 변환된 것을 확인할 수 있습니다. 이 방식은 차트 라이브러리나 데이터 시각화 도구에 데이터를 전달하기 전에 형식을 변환할 때 특히 유용합니다.