객체 구조 분해 할당(Object Destructuring)은 ES6(ES2015)에서 도입된 JavaScript 문법으로, 객체 내부의 속성값을 별도의 개별 변수로 간편하게 추출할 수 있게 해줍니다. 점 표기법으로 일일이 접근하는 대신 한 줄의 선언만으로 필요한 값을 꺼낼 수 있어 코드가 훨씬 간결하고 가독성이 높아집니다.
기본 문법
객체 구조 분해는 다음과 같이 중괄호 {} 안에 추출하고자 하는 속성 이름을 나열하는 형태로 작성합니다.
let { 속성1, 속성2, 속성3 } = 객체;이렇게 하면 객체에 존재하는 같은 이름의 속성값이 각각의 변수에 자동으로 할당됩니다.
전체 예제 코드
다음은 JavaScript에서 객체 구조 분해 할당을 구현한 완전한 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 객체 구조 분해 할당</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>JavaScript 객체 구조 분해 할당</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 객체가 구조 분해되어 결과가 표시됩니다</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
age: 22,
};
sampleEle.innerHTML += "obj = {firstName:'Rohan',lastName:'Sharma',age=22}";
let { firstName, lastName, age } = obj;
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML += `firstName=${firstName} lastName=${lastName}
age=${age}`;
});
</script>
</body>
</html>
코드 설명
위 예제의 핵심 부분은 다음 한 줄입니다.
let { firstName, lastName, age } = obj;이 코드를 실행하면 obj 객체의 firstName, lastName, age 속성값이 각각 동일한 이름의 변수에 할당됩니다. 이후 버튼 클릭 이벤트가 발생하면 템플릿 리터럴을 사용해 분해된 변수들의 값을 화면에 출력합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 구조 분해로 추출된 변수값들이 아래와 같이 결과 영역에 표시됩니다.
출력 결과에서 확인할 수 있듯이, firstName=Rohan, lastName=Sharma, age=22가 정상적으로 변수에 할당된 것을 알 수 있습니다. 이처럼 객체 구조 분해 할당을 활용하면 중첩된 데이터에서 필요한 값만 깔끔하게 추출하여 활용할 수 있습니다.