자바스크립트 객체 배열을 하나의 객체로 평면화하는 방법

자바스크립트에서 객체 배열(array of objects)을 하나의 객체(object)로 평면화(flatten)하려면, 객체 배열을 유일한 인자로 받는 함수를 직접 만들어 사용하면 됩니다. 이 함수는 각 키 뒤에 해당 요소의 인덱스를 붙인 형태의 평면화된 객체를 반환합니다.

이 방식의 시간 복잡도는 O(mn)입니다. 여기서 n은 배열의 크기, m은 각 객체가 가진 프로퍼티의 개수를 의미합니다. 반면 공간 복잡도는 O(n)으로, 실제 배열의 크기에 비례합니다.

예제 코드

아래 코드는 객체 배열을 하나의 객체로 평면화하는 과정을 보여줍니다.

// 객체 배열을 객체로 평면화하는 코드
// 예제용 객체 배열
const notes = [{
    title: 'Hello world',
    id: 1
}, {
    title: 'Grab a coffee',
    id: 2
}, {
    title: 'Start coding',
    id: 3
}, {
    title: 'Have lunch',
    id: 4
}, {
    title: 'Have dinner',
    id: 5
}, {
    title: 'Go to bed',
    id: 6
}];
const returnFlattenObject = (arr) => {
    const flatObject = {};
    for(let i=0; i<arr.length; i++){
        for(const property in arr[i]){
            flatObject[`${property}_${i}`] = arr[i][property];
        }
    };
    return flatObject;
}
console.log(returnFlattenObject(notes));

코드 설명

위 코드의 동작 원리를 단계별로 살펴보겠습니다.

먼저 빈 객체 flatObject를 생성한 뒤, 외부 for 루프로 배열의 각 요소를 순회하고, 내부 for...in 루프로 각 객체의 모든 프로퍼티를 탐색합니다. 이때 템플릿 리터럴을 활용해 프로퍼티명_인덱스 형태의 새로운 키를 만들고, 그 키에 원래 값을 할당합니다. 모든 순회가 끝나면 완성된 평면화 객체를 반환합니다.

출력 결과

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

[object Object] {
    id_0: 1,
    id_1: 2,
    id_2: 3,
    id_3: 4,
    id_4: 5,
    id_5: 6,
    title_0: "Hello world",
    title_1: "Grab a coffee",
    title_2: "Start coding",
    title_3: "Have lunch",
    title_4: "Have dinner",
    title_5: "Go to bed"
}

출력 결과에서 확인할 수 있듯이, 기존 배열의 각 객체가 가지던 title과 id 프로퍼티들이 title_0, id_0처럼 인덱스가 결합된 고유한 키로 변환되어 하나의 객체 안에 모두 담기게 됩니다. 이러한 평면화 기법은 중첩된 데이터 구조를 단일 객체로 다뤄야 할 때 특히 유용합니다.