자바스크립트 객체 속성이란?
객체 속성(Object Property)은 자바스크립트에서 객체에 연결된 값들을 의미합니다. 쉽게 말해, 객체는 여러 데이터를 하나로 묶어 관리하는 컨테이너이며, 그 안에 담긴 각각의 이름(name)과 값(value)의 쌍이 바로 속성입니다.
예를 들어 { name: "Rohan", age: 23 }이라는 객체가 있다면, name과 age가 속성명(키)이 되고, "Rohan"과 23이 해당 속성의 값이 됩니다.
속성에 접근하는 방법
객체의 속성값을 읽거나 수정하려면 일반적으로 다음 두 가지 방법을 사용할 수 있습니다.
- 점 표기법(Dot Notation):
testObj.name처럼 마침표 뒤에 속성명을 붙여 접근합니다. - 대괄호 표기법(Bracket Notation):
testObj["name"]처럼 문자열 형태로 접근합니다.
아래 예제에서는 점 표기법을 사용하여 객체의 속성값을 화면에 출력하는 방법을 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트 객체 속성</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Object Properties</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 testObj 객체의 name과 age 속성값이 출력됩니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
let testObj = { name: "Rohan", age: 23 };
sampleEle.innerHTML += "testObj.name = " + testObj.name + "<br>";
sampleEle.innerHTML += "testObj.age = " + testObj.age + "<br>";
});
</script>
</body>
</html>실행 결과
페이지가 처음 로드되면 아래와 같이 빈 결과 영역과 버튼만 화면에 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 이벤트 리스너가 실행되어, 객체 testObj에 저장된 name 속성값인 Rohan과 age 속성값인 23이 빨간색 텍스트로 순서대로 출력됩니다.
코드 동작 원리 정리
document.querySelector()를 사용해 결과를 표시할 요소(.sample)와 버튼(.Btn)을 선택합니다.- 버튼에
addEventListener로 클릭 이벤트 리스너를 등록합니다. - 버튼이 클릭되면
name과age속성을 가진 객체testObj를 생성합니다. - 점 표기법으로 속성값에 접근한 뒤,
innerHTML을 통해 화면에 누적 출력합니다.
이처럼 객체 속성은 자바스크립트에서 데이터를 구조화하고 활용하는 가장 기본적인 단위이므로, 점 표기법과 대괄호 표기법 모두 익숙하게 사용할 수 있도록 연습해 두는 것이 좋습니다.