JavaScript에서 하위 객체와 배열이 포함된 객체를 가져오는 방법

JavaScript의 ES 모듈(ES Module) 기능을 활용하면 다른 파일에 정의된 객체를 손쉽게 가져올 수 있습니다. 하위 객체(중첩 객체)나 배열처럼 복잡한 구조를 가진 데이터도 export와 import 문법만으로 그대로 주고받을 수 있습니다.

핵심 동작 방식은 다음과 같습니다.

내보내기(Export) – export default 키워드로 객체를 모듈 외부에 공개합니다.
가져오기(Import) – import 문으로 객체를 불러온 후 for...in 반복문 등을 이용해 각 속성에 접근합니다.

예제 코드

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>하위 객체와 배열이 포함된 객체 가져오기</h1>
<div class="result" style="color: green;"></div>
<script src="script.js" type="module"></script>
</body>
</html>

script.js

import obj from "./sample.js";
let resultEle = document.querySelector(".result");
for (let i in obj) {
    resultEle.innerHTML += "Property = " + i + " : Value = " + JSON.stringify(obj[i]) + "<br>";
}

sample.js

export default {
    firstName: "Rohan",
    lastName: "Sharma",
    school: {
        name: "St Marks",
        address: "USA",
    },
    sports: ["cricket", "football"],
};

코드 설명

sample.js는 문자열 속성뿐 아니라 하위 객체(school)와 배열(sports)을 포함한 객체를 export default로 내보냅니다.
script.js는 HTML에서 <script type="module"> 형태로 로드되므로 import 문을 사용할 수 있습니다.
for...in 반복문으로 객체의 모든 최상위 속성을 순회하며 결과 영역에 하나씩 출력합니다.
가져온 객체는 중첩 구조가 그대로 유지되므로 obj.school.name, obj.sports[0]처럼 평소와 같은 방식으로 접근할 수 있습니다.

실행 결과

위 코드를 실행하면 sample.js에서 내보낸 객체의 각 속성 이름(Property)과 값(Value)이 초록색 텍스트로 화면에 표시됩니다. school 객체와 sports 배열 역시 중첩 구조가 그대로 보존된 채 함께 전달되는 것을 확인할 수 있습니다.

JavaScript에서 하위 객체와 배열이 포함된 객체를 가져오는 방법