JavaScript에서 객체의 속성(property)에 접근하는 방법은 크게 세 가지가 있습니다.
- 점 표기법(Dot Notation): object.property
- 대괄호 표기법(Bracket Notation): object['property']
- 객체 구조 분해 할당(Object Destructuring): let {property} = object
세 가지 방법의 특징
점 표기법은 가장 간결하고 직관적이지만, 속성 이름에 공백이나 특수문자가 포함된 경우에는 사용할 수 없습니다. 대괄호 표기법은 문자열이나 변수를 이용해 동적으로 속성에 접근할 수 있어 유연성이 뛰어납니다. 구조 분해 할당은 객체에서 원하는 속성을 한 번에 추출하여 변수로 선언할 수 있어 코드가 더 깔끔해집니다.
예제 코드
아래는 세 가지 방법으로 JavaScript 객체 속성에 접근하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<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: blueviolet;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>JavaScript 객체 속성 접근하기</h1>
<div><pre class="sample">{a:22,b:44}</pre></div>
<div class="result"></div>
<button class="Btn">접근하기</button>
<h3>위 버튼을 클릭하면 객체 속성에 접근한 결과를 확인할 수 있습니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = { a: 22, b: 44 };
BtnEle.addEventListener("click", () => {
resEle.innerHTML += "obj.a = " + obj.a + "<br>";
resEle.innerHTML += "obj['a'] = " + obj["a"] + "<br>";
let { a } = obj;
resEle.innerHTML += "{a}=obj = " + a + "<br>";
});
</script>
</body>
</html>실행 결과
코드를 실행하면 화면에 {a:22, b:44}라는 샘플 객체와 '접근하기' 버튼이 표시됩니다.
'접근하기' 버튼을 클릭하면 아래와 같이 세 가지 방식으로 접근한 결과가 순서대로 출력됩니다.
obj.a→ 22 (점 표기법)obj['a']→ 22 (대괄호 표기법){a} = obj→ 22 (구조 분해 할당)
세 가지 방법 모두 동일하게 속성 값인 22를 반환하는 것을 확인할 수 있습니다. 상황에 맞는 방법을 선택하면 더욱 가독성 높고 유지보수하기 쉬운 코드를 작성할 수 있습니다.