JavaScript 객체 구조 분해 할당(Object Destructuring)이란?
객체의 프로퍼티에 접근할 때 일반적으로는 객체명.프로퍼티명 형태로 접근합니다. 하지만 구조 분해 할당(Destructuring)을 사용하면 이러한 규칙적인 방식 대신, 객체에서 필요한 값을 꺼내 훨씬 간결하고 직관적으로 다룰 수 있습니다. 이번 글에서는 JavaScript 객체 Destructuring의 개념과 사용 방법을 예제와 함께 자세히 알아보겠습니다.
예제 1 - 일반적인 방식으로 객체 프로퍼티 접근하기
아래 예제에서는 'person'이라는 객체를 정의하고, 일반적인 방식인 person.name, person.age 형태로 프로퍼티에 접근합니다. 이 방법은 가장 기본적이고 널리 사용되는 방식입니다.
<html>
<body>
<script>
let person = {name: "Nani", age: 25};
document.write(person.name);
document.write("</br>");
document.write(person.age);
</script>
</body>
</html>출력 결과
Nani 25
예제 2 - 구조 분해 할당(Destructuring) 방식으로 접근하기
이번에는 같은 객체 'person'의 프로퍼티를 Destructuring(구조 분해) 방식으로 접근해 보겠습니다. let {name, age} = person; 코드 한 줄만으로 객체의 프로퍼티 값들이 각각의 변수에 할당됩니다. 이후부터는 더 이상 'person.name'처럼 객체 이름을 붙일 필요 없이, 변수 name과 age만으로 바로 값을 사용할 수 있습니다.
<html>
<body>
<script>
let person = {name: "Nani", age: 25};
let {name, age} = person;
document.write(name);
document.write("<br>");
document.write(age);
</script>
</body>
</html>출력 결과
Nani 25
두 예제의 출력 결과는 동일하지만, Destructuring을 활용하면 코드가 더 짧아지고 가독성도 크게 향상됩니다. 특히 객체에서 여러 프로퍼티를 동시에 추출하거나 함수 매개변수로 전달할 때 매우 유용하므로, ES6 이상 환경에서는 적극적으로 활용하는 것이 좋습니다.