[JavaScript]객체의 프로퍼티를 접근하는 방법

JavaScript에서 객체의 프로퍼티을 접근하는 방법은 점( . ) 표기법과 대괄호( [] ) 표기법이 존재합니다.

 

이번 포스팅에서는 객체의 프로퍼티를 접근하는 방법과 표기법 사용 방법을 정리합니다.

 

목차

1. 객체의 프로퍼티를 접근하는 방법
2. 어떤 표기법을 사용하는 것이 좋은가?
3. 점 표기법의 한계
4. 동일한 이름의 식별자와 속성이 존재하는 경우
5. 결론

---

객체의 프로퍼티를 접근하는 방법

점( . ) 표기법과 대괄호( [] ) 표기법을 사용하여 접근합니다.

var objProperties = 'title'

var obj = {
  title : 'Java'
}

// 점 표기법
console.log(obj.title);
// Java

// 대괄호 표기법 1. 문자열로 접근
console.log(obj['title']);
// Java

// 대괄호 표기법 2. 변수로 접근
console.log(obj[objProperties]);
// Java

배열 요소가 객체인 경우

배열 arr의 1번째 인덱스인 요소의 title 프로퍼티를 접근하는 코드입니다.

var objProperties = 'title'

var arr = [
  {
    title : 'Java'
  },
  {
    title : 'React'
  },
  {
    title : 'ECMA Script'
  }
]

// 점 표기법
console.log(arr[1].title);
// React

// 대괄호 표기법 1. 문자열로 접근
console.log(arr[1]['title']);
// React

// 대괄호 표기법 2. 변수로 접근
console.log(arr[1][objProperties]);
// React

중첩 객체의 프로퍼티를 접근하는 방법

객체 obj의 book 프로퍼티의 title을 접근하는 코드입니다.

var objBook = 'book';
var objTitle = 'title';

var obj = {
  title : 'Java',
  book : {
    title : 'Refactoring Java'
  }
}

// 점 표기법
console.log(obj.book.title);
// Refactoring Java

// 대괄호 표기법 1. 문자열로 접근
console.log(obj['book']['title']);
// Refactoring Java

// 대괄호 표기법 2. 변수로 접근
console.log(obj[objBook][objTitle]);
// Refactoring Java

---

어떤 표기법을 사용하는 것이 좋은가?

출력 결과는 동일하지만, 기본적으로 점 표기법을 사용하는 것이 좋습니다.

 

점 표기법을 권장하는 이유

• 사용하기가 쉽다.
• 대괄호 표기법에 비해 타이핑이 빠르다.

---

점 표기법의 한계

점 표기법은 식별자로 동작한다는 한계가 있습니다.

 

식별자 작성 규칙

• 대소문자를 구분한다.
• 일부 특수 문자 $, _ 를 허용한다.
• 숫자로 시작할 수 없다.

 

아래 코드는 obj의 프로퍼티가 대소문자 구분이 되어있으며, 숫자로 시작하는 경우입니다.

※ 특수한 경우를 보여주기 위해 obj의 프로퍼티를 작은 따옴표( ' ' )를 사용하여 선언하였습니다.

var obj = {
  'TITLE' : 'JAVA',
  'title' : 'java',
  '$name' : '$name',
  'name-123' : 'name-123'
}

console.log(obj.TITLE);
// JAVA

console.log(obj.title);
// java

console.log(obj.$name);
// $name

console.log(obj.name-123);
// NaN

 

점 표기법을 사용하여 obj.name-123을 접근하는 경우 식별자 규칙을 위반하여 문제가 발생합니다.

 

하지만, 대괄호 표기법을 사용한다면 문제가 되지 않습니다.

var obj = {
  'TITLE' : 'JAVA',
  'title' : 'java',
  '$name' : '$name',
  'name-123' : 'name-123'
}

console.log(obj['TITLE']);
// JAVA

console.log(obj['title']);
// java

console.log(obj['$name']);
// $name

console.log(obj['name-123']);
// name-123

---

동일한 이름의 식별자와 속성이 존재하는 경우

동일한 이름의 식별자와 속성이 존재하는 경우에는 표기법에 따라 다르게 동작합니다.

의도되지 않은 결과가 나올 수 있으므로 주의하도록 합니다.

var title = 'score';

var obj = {
  title : 'Java',
  score : 85
}

// obj의 title 속성에 접근한다.
console.log(obj.title);
// "Java"

// obj의 score속성에 접근한다.
console.log(obj[title]);
// 85

---

결론

일반적으로 점 표기법을 사용하는 것이 좋습니다.

그러나 식별자 또는 변수로 속성을 접근해야 하는 경우에는 대괄호 표기법을 사용하는 것이 좋습니다.