JavaScript에서 객체(Object)는 속성(property)과 메서드(method)를 담고 있는 데이터 구조입니다. 객체가 생성된 이후에도 언제든지 새로운 멤버를 동적으로 추가할 수 있으며, 이를 객체 멤버 설정이라고 합니다.
객체 멤버란?
객체 멤버는 크게 두 가지로 나눌 수 있습니다.
- 속성(Property) : 객체가 가지고 있는 값, 예를 들어 이름이나 나이 같은 데이터
- 메서드(Method) : 객체가 수행할 수 있는 함수, 예를 들어 정보를 출력하는 기능
JavaScript에서는 점 표기법(dot notation)을 사용하여 간단하게 객체의 멤버를 설정할 수 있습니다.
예제 코드
다음은 JavaScript에서 객체 멤버를 설정하는 전체 예제 코드입니다.
<!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 {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Setting object members</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to set student object members and display them</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let student = {};
BtnEle.addEventListener("click", () => {
student.name = "Rohan";
student.age = 22;
student.displayInfo = function () {
resEle.innerHTML = "Name = " + this.name + " : Age = " + this.age;
};
student.displayInfo();
});
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분을 살펴보겠습니다.
let student = {};: 빈 객체를 생성합니다.student.name = "Rohan";: 점 표기법으로 name 속성을 설정합니다.student.age = 22;: age 속성을 설정합니다.student.displayInfo = function () {...}: displayInfo라는 메서드를 객체에 추가합니다.- 메서드 내부에서
this.name,this.age를 사용해 해당 객체 자신의 속성값에 접근합니다.
버튼 클릭 시 위 과정이 모두 실행되며, 결과가 화면에 출력됩니다.
실행 결과
페이지를 처음 열면 아래와 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 다음과 같이 학생 객체의 이름과 나이가 화면에 표시됩니다.
마무리
이처럼 JavaScript에서는 객체를 생성한 후에도 점 표기법을 활용해 속성과 메서드를 자유롭게 추가할 수 있습니다. 이러한 유연성은 JavaScript 객체 지향 프로그래밍의 핵심 특징 중 하나이며, 실무에서도 매우 자주 활용되는 패턴입니다.