자바스크립트의 구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 값을 꺼내어 변수에 담는 기능으로 널리 알려져 있지만, 이를 활용하면 이미 존재하는 다른 객체에 새로운 속성을 동시에 할당하는 것도 가능합니다.
구조 분해 할당으로 객체에 속성 할당하기
핵심 문법은 ({ a: obj.a, b: obj.b } = sourceObj) 형태입니다. 소스 객체의 각 프로퍼티 값이 콜론(:) 뒤에 지정된 대상 객체의 속성에 순서대로 대입됩니다. 이때 전체 표현식을 괄호로 감싸야 한다는 점을 유의해야 합니다. 그렇지 않으면 자바스크립트 엔진이 중괄호를 블록문으로 해석하여 문법 오류가 발생합니다.
예제 코드
다음은 구조 분해 할당을 사용해 빈 객체 obj에 새로운 속성들을 할당하는 전체 예제입니다.
<!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,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>구조 분해 할당으로 객체에 새 속성 할당하기</h1>
<div class="sample">{"a":11,"b":22,"c":44}</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 위 객체를 구조 분해하여 obj에 값이 할당됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let obj = {};
let obj1 = {
a: 11,
b: 22,
c: 44,
};
({ a: obj.a, b: obj.b, c: obj.c } = obj1);
document.querySelector(".Btn").addEventListener("click", () => {
for (let i in obj) {
resEle.innerHTML += "key = " + i + " : Value = " + obj[i] + "<br>";
}
});
</script>
</body>
</html>코드 설명
위 예제에서 obj1에는 a, b, c 세 개의 속성이 정의되어 있습니다. 이후 ({ a: obj.a, b: obj.b, c: obj.c } = obj1); 구문이 실행되면서 obj1의 각 값들이 비어 있던 obj 객체의 해당 속성에 복사됩니다.
버튼 클릭 시 등록된 이벤트 리스너는 for...in 반복문을 통해 obj의 모든 키와 값을 화면에 출력합니다.
출력 결과
위 코드를 실행하면 다음과 같은 출력을 확인할 수 있습니다.
'CLICK HERE' 버튼을 클릭하면 구조 분해 할당된 결과가 아래와 같이 표시됩니다.
정리
이처럼 구조 분해 할당은 단순히 변수 선언에만 국한되지 않고, ({ key: target.property } = source) 형태로 작성하면 기존 객체에도 속성을 추가·할당할 수 있습니다. 여러 속성을 한 번의 문장으로 옮길 수 있어 코드가 간결해진다는 장점이 있습니다. 단, 표현식 전체를 괄호로 묶는 것을 잊지 않도록 주의하세요.