JavaScript의 중첩 구조 분해 할당(Nested Destructuring)은 객체나 배열 내부에 또 다른 객체 또는 배열이 포함되어 있을 때, 한 번의 선언으로 깊은 곳에 있는 값까지 손쉽게 추출할 수 있게 해주는 강력한 문법입니다.
예를 들어 객체 안에 객체가 있거나, 배열 안에 배열이 중첩된 경우에도 중괄호 {}와 대괄호 []를 계층 구조에 맞게 작성하면 원하는 값을 바로 변수에 할당할 수 있습니다.
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;
}
.sample,.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Nested de-structuring in JavaScript.</h1>
<div><pre class="sample"></pre></div>
<div><pre class="result"></pre></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to destructure the above nested array and object</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let obj = {
Name: {
firstName: "Rohan",
lastName: "Sharma",
},
age: 22,
};
let arr = [22, 33, ["a", "b"]];
sampleEle.innerHTML = '{Name:{firstName: "Rohan", lastName: "Sharma"},age: 22} <br>';
sampleEle.innerHTML += "[22,33,['a','b']";
let {
Name: { firstName, lastName },
age,
} = obj;
let a, b, c, d;
[a, b, [c, d]] = arr;
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML += `firstName=${firstName} lastName=${lastName} age=${age}
'<br>`;
resultEle.innerHTML += `a=${a} b=${b} c=${c} d=${d} '<br>`;
});
</script>
</body>
</html>코드 핵심 설명
- 객체 구조 분해:
Name속성 안에 중첩된firstName과lastName을{ Name: { firstName, lastName } }형태로 한 번에 추출합니다. - 배열 구조 분해:
[a, b, [c, d]] = arr;코드로 배열 안의 배열 요소까지 각각의 변수에 할당합니다. - 버튼 클릭 이벤트: 버튼을 클릭하면 구조 분해로 얻은 값들이 화면에 출력됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 구조 분해된 결과가 아래와 같이 표시됩니다.
정리
중첩 구조 분해 할당을 활용하면 복잡하게 중첩된 데이터 구조에서도 간결하고 직관적인 코드로 필요한 값만 추출할 수 있습니다. API 응답 데이터 처리처럼 깊이 중첩된 객체를 다룰 때 특히 유용하므로, 기본 구조 분해와 함께 반드시 익혀두는 것이 좋습니다.