Javascript : 객체 속성 접근법 - Dot Notation / Bracket Notation

i_sy_code·2022년 1월 27일

1. 객체란?

javascript에서 객체란, 속성과 타입을 가진 독립적인 개체(Entity)다.
사람이라는 개체가 이름, 나이, 키, 직업 등의 속성을 갖는 것처럼 객체 역시 특징을 결정짓는 속성을 가진다.
객체는 다음과 같이 중괄호 {}안에 속성명(key) : 속성값(value)을 포함하는 형태를 띠고 있다.

let obj = {
  name : "홍길동",
  age : 20,
  height : 170cm,
  job : "정의로운 도적"
}

객체의 속성은 객체에 붙은 변수라고도 말할 수 있다.
우리가 let, const를 통해 선언하는 변수와 크게 다를바 없지만, 객체에 속해있다는 점이 다르다.
자, 그럼 이러한 객체의 속성에 접근하는 2가지 방법에 대해 알아보자.

2. Dot Notation (점 접근법)

객체명.속성명(=key값)

단순히 점을 찍어 속성에 쉽게 접근할 수 있기 때문에 많이 사용된다.

Dot Notation을 통해 객체의 속성에 접근하여 값을 할당해보자.

const myMacBook = new Object();  // object를 생성하는 또다른 방식이다.
myMacBook.model = "맥북 에어 M1";
myMacBook.color = "space gray";
myMacBook.RAM = "8GB";
myMacBook.SSD = "256GB";
console.log(myMacBook)  // [object Object] { color: "space gray", model: "맥북 에어 M1", RAM: "8GB", SSD: "256GB"}

콘솔에 찍은 결과로부터 알 수 있는 객체 특징은 바로 정해진 순서가 없다는 것.
이것이 바로 배열과의 큰 차이점이기도 하다.
배열은 index를 통해 요소에 접근하지만, 객체는 순서가 없므로 다른 접근법을 쓰는 것이다.

Dot Notation을 통해 속성값을 출력해보자.
console.log(myMacBooc.color)   // "space gray"
console.log(myMacBooc.SSD)     // "256GB"

3. Bracket Notation (대괄호 접근법)

객체명["속성명"]

대괄호 안에 속성을 입력해 접근하는 방식이며, 점 대신 [" "]로만 바꿔주면 동일한 결과를 얻는다.
확실히 점찍는 것보단 귀찮은데, 그렇다면 왜 이 접근법이 따로 존재할까?
크게 두가지의 이유로 나눠볼 수 있겠다.

3-1 ) 점표기법 사용시 속성명은 일반 변수처럼 행동한다.

이게 무슨 말인가.. 싶겠지만, 이렇게 표현할 수 밖에 없었다..
변수 이름을 설정할 때 정해진 표기법이 있다.

　1. 숫자는 첫 글자로 올 수 없다.

　2. 띄어쓰기를 하면 안되고, camelCase 형식으로 이름을 지어야 한다.

　3. 특수문자를 넣을 수 없다. (단, $와 _는 제외)

즉, 점표기법으로 속성 접근 or 생성시 해당 규칙을 어기면 안되지만, 브라켓 접근법으로는 가능해진다.

myMacBook.16gbRam = "good";            // error 발생 "SyntaxError: Invalid or unexpected" token
myMacBook["16gbRam"] = "good";         // [object Object] {16gbRam: "good"}
-
myMacBook.After 10years = "none";      // error 발생 "SyntaxError: Invalid or unexpected" token
myMacBook["After 10years"] = "none";   // [object Object] {After 10years: "none"}

3-2 ) 브라켓 접근법은 속성만 새로운 변수에 할당하는 것이 가능하다.

바로 코드 예시를 보자.

let graycolor = "color"
console.log(myMacBook.graycolor)     // undefined
console.log(myMacBook[graycolor])    // "space gray"

점 접근법에서는 변수 graycolor가 새로운 객체 속성인 줄 알고 찾으려 하지만, 못찾고 undefined를 반환한다.
이와 달리, 브라켓 접근법은 큰따옴표" "의 유무에 따라 접근하려는 게 속성인지 변수인지 구분할 수 있게 된다.
따라서 Bracket Notation을 사용할 때는 반드시 큰 따옴표 사용 유무에 주의하여야 한다.

* 단, 다음과 같이 객체.속성 형식으로 변수에 할당하고 해당 변수를 콘솔로 불러오는 것은 가능하다.
let graycolor = myMacBook.color
console.log(graycolor)  // "space-gray"

4. 마무리

정리하면서도 나도 헷갈렸던 두 접근법이다. 사용에 익숙해질 수 있도록 여러 번 연습하는 것을 권장드린다.
그리고 이건 개인적인 의견인데
속성명 자체를 변수명 표기법에 따라 짓고,
변수 할당도 객체명.속성명으로 주는 방식으로 사용한다면 점 접근법을 더 유용하게 사용할 수 있을 것 같다.