객체의 속성에 접근하는 방법 - Dot Notation과 Bracket Notation

배열의 데이터는 인덱스 값을 이용해 접근한다.
객체의 속성은 key값을 이용해 접근한다.
객체의 속성에 접근하는 방법 두 가지를 알아보자.

Dot notation

점.을 이용해서 접근하는 방법

객체 이름 뒤에 .을 붙이고, 접근하고자 하는 데이터의 key값을 쓴다.

let object = {
	name : haley
   age : 26
}
object.name // 'haley'
object.age // 26

Bracket Notation

대괄호 []를 이용해서 접근하는 방법

객체 이름 뒤에 대괄호를, 대괄호 안에는 접근하고자 하는 데이터의 key값을 쓴다.

let object = {
	name : haley,
   age : 26
}
object[name] // 'haley'
object[age] // 26

차이점

Dot notation:

• 숫자로 시작하는 키에 접근할 수 없다. (사용 불가능 : obj.1name )
• 띄어쓰기가 포함된 키에 접근할 수 없다. (사용 불가능 : obj.my name)
• 변수에 사용할 수 없다.

Bracket notation:

• 모든 키에 접근할 수 있다.

Bracket notation은 변수에 사용할 수 있다.

object  = {
	name : 'haley',
    age : 26
}

let myName = 'name'

console.log(object['name']) //haley
console.log(object[myName]) //haley

두 개의 속성을 갖고 있는 object라는 객체가 있다.
이때 변수를 이용해 객체의 속성에 접근할 수 있다.
위의 myName 변수에 'name'을 할당하면 console.log(object[myName])의 대괄호 안에서 변수 myName이 'name'이 되어 key 값으로 사용되고, value로서 'haley'가 반환된다.

Dot notation은 변수에 사용할 수 없다.

object  = {
	name : 'haley',
    age : 26
    myName : 'saemo'
}

let myName = 'name'

console.log(object['name']) //haley
console.log(object[myName]) //haley
console.log(object.myName)  //saemo

위 코드에서 dot notation을 이용해 myName에 접근했다. 하지만 dot notation은 변수에 사용할 수 없으므로, name : 'haley' 속성에 접근하지 않고 myName : 'saemo'에 접근한다.