JavaScript에서 객체 배열의 중첩 해제하기 – map() 메서드 활용법

객체 배열에 중첩된 속성을 해제(un-nest)하려면 map() 메서드를 활용하면 됩니다. map()은 배열의 각 요소를 순회하면서 새로운 배열을 반환하는 자바스크립트의 대표적인 고차 함수로, 데이터 구조를 변환할 때 가장 널리 사용됩니다.

다음과 같이 학생 정보가 담긴 객체 배열이 있다고 가정해 보겠습니다.

const studentDetails = [
    {
        "studentId": 101,
        "studentName": "John",
        "subjectDetails": {
            "subjectName": "JavaScript"
        }
    },
    {
        "studentId": 102,
        "studentName": "David",
        "subjectDetails": {
            "subjectName": "MongoDB"
        }
    }
];

각 학생 객체 안에는 subjectDetails라는 하위 객체가 존재하고, 그 안에 subjectName(과목명)이 중첩되어 있습니다. 이 과목명을 밖으로 꺼내어 하나의 평면적인(flat) 구조로 만들어야 합니다. 이를 위해 map()을 사용한 코드는 다음과 같습니다.

예제

const studentDetails = [
    {
        "studentId": 101,
        "studentName": "John",
        "subjectDetails": {
            "subjectName": "JavaScript"
        }
    },
    {
        "studentId": 102,
        "studentName": "David",
        "subjectDetails": {
            "subjectName": "MongoDB"
        }
    }
];

const output = studentDetails.map(obj => ({
    studentId: obj.studentId,
    studentName: obj.studentName,
    subjectName: obj.subjectDetails.subjectName
}));

console.log(output);

위 코드에서 map()은 배열의 각 객체를 순회하며 새로운 객체를 생성합니다. 핵심은 obj.subjectDetails.subjectNamesubjectDetails 객체 없이 subjectName만 최상위 속성으로 들어간 새로운 배열이 반환됩니다.

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

출력 결과

여기서 파일 이름은 demo92.js입니다. 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo92.js
[
    { studentId: 101, studentName: 'John', subjectName: 'JavaScript' },
    { studentId: 102, studentName: 'David', subjectName: 'MongoDB' }
]

보시다시피 원래 중첩되어 있던 subjectName이 각 객체의 최상위 속성으로 해제되어, 훨씬 더 단순하고 다루기 쉬운 데이터 구조가 되었습니다. 이러한 방식은 API 응답 데이터를 정규화하거나, 중첩된 JSON을 테이블 형태로 변환할 때 특히 유용하게 활용됩니다.