JavaScript에서 점 표기법(dot notation)은 객체의 속성(property)에 접근할 때 사용되는 가장 기본적이고 널리 쓰이는 방식입니다. 객체 이름 뒤에 마침표(.)를 붙이고 그 뒤에 속성 이름을 작성하면 해당 값을 손쉽게 읽거나 수정할 수 있습니다.
점 표기법의 기본 문법
점 표기법은 아래와 같은 형태로 사용합니다.
객체명.속성명
예를 들어 student.name처럼 작성하면 student 객체의 name 속성 값에 바로 접근할 수 있습니다. 대괄호 표기법(obj["name"])보다 코드가 간결하고 가독성이 좋아, 속성 이름이 고정되어 있을 때 가장 많이 활용됩니다.
예제 코드
다음은 생성자 함수로 만든 학생(student) 객체의 속성을 점 표기법으로 조회하는 전체 예제입니다.
<!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>Dot notation in JavaScript.</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to access the student object properties using dot notation</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function Student(name, age, standard) {
this.name = name;
this.age = age;
this.standard = standard;
}
let student1 = new Student("Rohan", 18, 12);
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "student1.name = " + student1.name + "<br>";
resEle.innerHTML += "student1.age = " + student1.age + "<br>";
resEle.innerHTML += "student1.standard = " + student1.standard + "<br>";
});
</script>
</body>
</html>위 코드에서는 Student 생성자 함수로 이름, 나이, 학년 정보를 가진 객체를 만들고, 버튼 클릭 이벤트가 발생하면 student1.name, student1.age, student1.standard처럼 점 표기법으로 각 속성 값에 접근하여 화면에 출력합니다.
실행 결과
페이지가 로드된 초기 화면은 다음과 같습니다.
'CLICK HERE' 버튼을 클릭하면 점 표기법으로 가져온 객체 속성 값들이 아래와 같이 화면에 표시됩니다.
정리
점 표기법은 속성 이름이 미리 정해져 있고 유효한 식별자 규칙(영문자, 숫자, 밑줄 등)을 따를 때 가장 적합합니다. 반면 속성 이름이 동적으로 결정되거나 공백·특수문자를 포함하는 경우에는 대괄호 표기법을 사용하는 것이 좋습니다. 두 방식의 차이를 이해하고 상황에 맞게 활용하면 더 깔끔하고 안전한 JavaScript 코드를 작성할 수 있습니다.