JavaScript에서 다차원 객체란 객체 내부에 또 다른 객체가 중첩된(nested) 구조를 의미합니다. 이러한 계층형 구조를 활용하면 이름, 학교, 주소처럼 서로 연관된 데이터를 하나의 객체 안에 체계적으로 담아 관리할 수 있습니다.
예제 코드
다음은 JavaScript로 다차원 객체를 생성하고 화면에 표시하는 전체 코드입니다.
<!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;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Create a multidimensional JavaScript object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display a multidimensional object</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
let obj = {
firstName: "Rohan",
lastName: "Sharma",
school: {
name: "St Marks",
address: {
city: "Dwarka",
state: "Delhi",
},
},
};
console.log(obj);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CLICK HERE 버튼을 클릭한 뒤 브라우저 개발자 도구의 콘솔(Console)을 확인하면, 아래 그림처럼 중첩된 객체 구조가 그대로 저장되어 있는 것을 볼 수 있습니다.
코드 설명
핵심 로직은 버튼 클릭 이벤트 리스너 안에 있습니다. 최상위 객체 obj에는 firstName, lastName이라는 일반 속성이 있고, 그 아래 school 객체가 중첩되어 있습니다. school 객체 안에는 다시 name 속성과 address 객체가 들어 있으며, address에는 city와 state 값이 저장됩니다.
이렇게 객체 안에 객체를 원하는 깊이만큼 중첩하면, 실제 서비스에서 사용하는 복잡한 데이터(사용자 프로필, 카테고리 트리, 설정 정보 등)도 직관적인 구조로 표현할 수 있습니다. 중첩된 값에 접근할 때는 점 표기법으로 obj.school.address.city처럼 작성하면 됩니다.