Object (2)

객체에 접근하는 두 가지 방법

🥝 객체에 접근하는 두 가지 방법

앞서 array를 배울 때는 array의 데이터에 접근하기 위해서 index[0], index[1] 등으로 데이터에 접근했다. 객체에서는 프로퍼티의 key를 이용하여 value 값에 접근하게 되는데 이 접근 방식에는 2가지의 방식이 있다.

첫 번째 방법 - Dot Notation

가장 흔하게 쓰이는 방법이다. 말 그대로 점(.)을 사용한 표기법이다.

• 형태

objectName.propertyName;

• 예시

let obj = {
  cat: 'meow',	//	원래는 'cat', 따옴표 생략되어 있음
  dog: 'woof'
};

let sound = obj.cat;	// Dot notation
console.log(sound);
// meow

• 특징

1. 객체 이름, 점, 프로퍼티 이름(접근하고자 하는 데이터의 key)을 차례로 지정하여 객체의 데이터에 접근할 수 있다.
2. 프로퍼티 이름(식별자)은 영숫자(및 _ 및 $)만 가능하다.
3. 프로퍼티 이름(식별자)은 숫자로 시작할 수 없다.
4. 프로퍼티 이름(식별자)은 변수를 포함할 수 없다.
5. 가능(예시) - obj.prop_1, obj.prop$
6. 불가능(예시) - obj.1prop, obj.prop name
   
   

두 번째 방법 - Bracket Notation

말 그대로 대괄호(Bracket)을 사용한 표기법이다.

• 형태

objectName["propertyName"]

• 예시

let obj = {
  cat: 'meow',
  dog: 'woof'
};

let sound = obj['cat'];		// Bracket notation, 객체 내부 key 값은 따옴표 써주기
console.log(sound);
// meow

• 특징

1. 객체의 이름과 대괄호로 묶인 프로퍼티의 이름을 차례로 지정하여 객체의 데이터에 접근할 수 있다.
2. 프로퍼티 이름(식별자)은 객체 내의 문자열 또는 문자열을 참조하는 변수여야 한다.
3. 변수, 공백 및 숫자로 시작하는 문자열을 사용할 수 있다.
4. 가능(예시) - obj["1prop"], obj["prop name"]
   
   

그리고 우리는 이러한 괄호 표기법을 어디에선가 많이 봐왔다! 바로 Array다.

arrayName[element]

이 방법을 사용하여 배열의 데이터에 접근할 때 많이 사용하였다.

헷갈릴 만한 예시

1)

let obj = {
  cat: 'meow',
  dog: 'woof'
};

let dog = 'cat';
let sound = obj[dog];	// 변수는 따옴표 사용하지 않음
console.log(sound);
// meow

괄호 표기법(Bracket Notation)은 변수를 취급한다. 'cat' 이라는 스트링을 값으로 담고 있는 dog (let dog = 'cat';) 라는 변수를 객체의 괄호에 넣었기 때문에 cat 프로퍼티의 값인 meow 가 나오게 된 것이다.

2)

let obj = {
  cat: 'meow',
  dog: 'woof'
};

let dog = 'cat';
let sound = obj.dog;
console.log(sound);
// woof

점 표기법(Dot Notation)은 변수를 포함할 수 없기 때문에 cat 을 값으로 선언한 dog (let dog = 'cat';) 라는 변수가 객체의 프로퍼티 이름(식별자)으로 들어갈 수 없다. 변수 값을 사용하는 것이 아니라 obj 객체 내에서 'dog'의 프로퍼티 키 값을 찾게 되는 것이다.

---

<출처>
codeburst