JavaScript에서 객체의 속성(property)에 접근하는 방법은 크게 두 가지가 있습니다. 바로 점 표기법(dot notation)과 대괄호 표기법(bracket 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>Dot notation vs Bracket notation in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to access the student1 object properties using dot and bracket 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", () => {
let str = "name",
str1 = "age",
str2 = "standard";
resEle.innerHTML ="Using dot notation <br>student1.name = " + student1.name + "<br>";
resEle.innerHTML += "student1.age = " + student1.age + "<br>";
resEle.innerHTML +=
"student1.standard = " + student1.standard + "<br><br>";
resEle.innerHTML +=" Using bracket notation <br>student1[str] = " +
student1[str] +"<br>";
resEle.innerHTML += "student1[str1] = " + student1[str1] + "<br>";
resEle.innerHTML += "student1[str2] = " + student1[str2] + "<br>";
});
</script>
</body>
</html>실행 결과
위 페이지에서 'CLICK HERE' 버튼을 클릭하면 아래와 같이 두 표기법으로 접근한 객체 속성 값이 화면에 출력됩니다.
어떤 표기법을 사용해야 할까?
속성 이름이 고정되어 있고 단순하게 접근하는 경우라면 점 표기법이 가장 깔끔합니다. 하지만 다음과 같은 상황에서는 대괄호 표기법을 사용해야 합니다.
- 속성 이름을 담고 있는 변수를 통해 동적으로 접근해야 할 때 (예:
student1[str]) - 속성 이름에 공백이나 특수문자가 포함되어 있을 때 (예:
obj["first name"]) - 속성 이름이 숫자로 시작하거나 예약어와 충돌하는 경우
정리하면, 평소에는 읽기 쉬운 점 표기법을 기본으로 사용하고, 동적 접근이 필요하거나 특수한 속성 이름을 다룰 때만 대괄호 표기법으로 전환하는 것이 좋은 코딩 습관입니다.