JavaScript에서 객체(Object)는 관련된 데이터와 기능을 하나로 묶어 관리할 수 있는 핵심 자료구조입니다. 이 글에서는 객체 리터럴 방식으로 객체를 생성하고, 점 표기법을 사용해 속성에 접근하는 방법을 실제 예제 코드와 함께 살펴보겠습니다.
JavaScript에서 객체 생성하기
객체를 생성하는 가장 일반적이고 간단한 방법은 중괄호({})를 사용하는 객체 리터럴(object literal) 방식입니다. 객체 내부에는 문자열, 숫자 같은 값뿐만 아니라 함수(메서드)도 포함할 수 있으며, 메서드 안에서는 this 키워드를 통해 자신이 속한 객체의 속성에 접근할 수 있습니다.
예제 코드
다음은 객체를 생성하고 버튼 클릭 시 해당 객체의 속성에 접근해 화면에 출력하는 전체 코드입니다.
<!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;
}
</style>
</head>
<body>
<h1>Hoisting in JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
Click on the above button to create and access a object
</h3>
<script>
let btnEle = document.querySelector(".btn");
let resEle = document.querySelector(".result");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
welcome() {
return "Welcome " + this.firstName + " " + this.lastName;
},
};
btnEle.addEventListener("click", () => {
resEle.innerHTML = "obj.firstName = " + obj.firstName + "<br>";
resEle.innerHTML += "obj.lastName = " + obj.lastName + "<br>";
resEle.innerHTML += "obj.welcome() = " + obj.welcome() + "<br>";
});
</script>
</body>
</html>코드 설명
- obj 객체 생성: firstName과 lastName이라는 두 개의 문자열 속성과, 인사말을 반환하는 welcome() 메서드로 구성되어 있습니다.
- this 키워드: welcome() 메서드 내부에서 this.firstName, this.lastName처럼 사용되어, 해당 메서드가 호출된 객체 자신의 속성 값을 참조합니다.
- 이벤트 처리: querySelector()로 버튼과 결과 영역을 선택한 뒤, addEventListener()로 클릭 이벤트를 등록하여 버튼을 누르면 속성 값들이 화면에 출력됩니다.
속성에 접근하는 두 가지 방법
- 점 표기법(Dot Notation):
obj.firstName처럼 마침표 뒤에 속성 이름을 붙여 접근합니다. 가장 널리 사용되는 방식입니다. - 대괄호 표기법(Bracket Notation):
obj['firstName']처럼 대괄호 안에 문자열 키를 넣어 접근합니다. 속성 이름이 동적으로 결정될 때 유용합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 객체의 각 속성 값과 메서드의 반환 결과가 아래와 같이 출력됩니다.
결과 화면에서 확인할 수 있듯이, obj.welcome() 메서드는 this를 통해 객체 내부의 firstName과 lastName 값을 조합하여 "Welcome Rohan Sharma"라는 문자열을 반환합니다. 이처럼 객체 리터럴과 점 표기법만으로도 간단하게 객체를 만들고 활용할 수 있습니다.