TIL | 객체 속성 접근하기

1. 객체 속성 접근 하는 방법

객체는 key를 이용해서 속성에 접근한다.

---

1-1. Dot notation 방법

Dot notation 방법은 점을 이용해서 접근하는 방법이다.

let mySelf = {
  name: 'SeYoung',
  location: {
  	country: 'South Korea',
    city: 'Seoul'
  	},
  age: 25,
  cats: ['비비', '들이']}

위에 객체에서 'SeYoung'이라는 value에 접근하고 싶다면

mySelf.name//'SeYoung'

이렇게 객체 이름을 쓰고 점을 찍은 후 접근하고 싶은 값의 key를 입력하면 된다.

그럼 value에 객체가 할당된 경우는 어떨까?

mySelf.location
//결과
[object Object] {
  city: "Seoul",
  country: "South Korea"
}

할당된 객체가 출력된다.

---

1-2. Bracket Notation 방법

Bracket Notation 방법은 대괄호를 이용하는 방법이다.

mySelf['name']//'SeYoung'

객체의 이름을 쓰고 대활호를 열어준 다음 내가 접근하고 싶은 value의 key를 따옴표로 감싸서 적으면 된다.

---

1-3. Dot notation 방법과 Bracket Notation 방법의 차이점

• Dot notation 방법은 숫자로 작성된 key에 접근할 수 없다.
• Dot notation 방법은 띄어 쓰기가 포함된 key에 접근할 수 없다.
• property의 key에 변수가 포함되어있으면 Dot notation 방법으로 접근할 수 없다.
• Bracket Notation 방법은 모두 가능하다.

---

1-4. property의 key에 변수가 포함되어있을 때 Bracket Notation으로 접근하는 방법

객체의 key는 기본적으로 string이다. 원래는 따옴표 안에 작성해야하지만 자바스크립트에서 자동적으로 처리해주기 때문에 따옴표 없이 작성해도 작동한다.

Bracket Notation으로 key에 접근할 때 따옴표를 써야하는 것도 key가 string이기 때문이다.

그렇기 때문에 저 string을 변수에 담아도 key로 사용할 수 있다. 간단한 예시로 알아보자.

let mySelf = {
  name: 'SeYoung',
  location: {
  	country: 'South Korea',
    city: 'Seoul'
  	},
  age: 25,
  cats: ['비비', '들이']}

let myKey = 'cats'

console.log(mySelf['cats'])
console.log(mySelf[myKey])
//console
["비비", "들이"]
["비비", "들이"]

• myKey라는 변수를 선언하고 mySelf 객체의 'cats'라는 key를 할당했다.
• Bracket Notation으로 직접 key 이름을 넣고 출력한 결과와 변수 myKey를 넣어서 출력한 값이 같은걸 볼 수 있다.
• 'cats'가 myKey라는 변수에 들어가 있기 때문에 똑같은 값을 출력하는 것이다.