key에 접근하는 2가지 방법. obj.key, obj['key']

1. 객체의 property에 접근하는 두 가지 방법

cosnt obj = {
	name: 'junha'
}

obj.name
obj['name']
// 'junha'

2. object.key 방법의 문제점

하이픈(-)이 들어간 property에 접근할 수 없다.

obj.a-b
// (obj.a) - b

obj['b-c']
// obj의 key 'a-b'에 접근

var a = {
	"a" :  1,
	"b-c": 2,
	"0d" : 3, // 선언 자체는 가능
	"d0" : 4,
    2: 5
}

console.log(a.a)   // 1
console.log(a.b-c) // ReferenceError: c is not defined
console.log(a.0d)  // SyntaxError: Invalid or unexpected token
// 변수는 숫자가 먼저 나오면 에러가 발생한다.

console.log(a.d0)   // 4
console.log(a.2)    // Uncaught SyntaxError: Unexpected number
console.log(a[2])   // 5
console.log(a['2']) // 5
console.log(Object.keys(a)[4]) // string

• 2에 대한 접근은 a[‘2’]로는 가능하지만, a.2는 에러가 발생한다.

• 마찬가지로 a[‘0d’]는 가능하지만 a.0d는 에러가 발생한다.

const a = {
	"a"    : 1,
	2      : 2,
	"b-c"  : 3, // -
	"— d"  : 4, // —
	" e "  : 5 // space
}

• 놀랍게도 따옴표로 엮으면 하이픈,space 문자등을 포함 할 수 있다.

• 그럼 접근 가능할까? O_O 모두 접근가능하다!

• 여전히 문자열로 되어있고, 이는 .(dot)표현의 한계를 넘어 [] 표현으로 모두 접근가능하다.

- object[key] 방법으로 객체에 속성값이 문자열이라면 전부 접근가능하다.

4. 변수로 key에 접근하고 싶을 때

const obj = {
	name : 'junha',
	age : 20,
    key : '9999'
}

const key = ‘age’

obj.age
obj["age"]
obj[key]
// 20

obj.key
// 9999

for (key in obj) {
	console.log(obj.key)
    // '9999', '9999', '9999'

    console.log(obj[key])
    // 'junha', 20, '9999'
}

• for문, map함수는 객체에 속성 개수만큼 loop를 돈다.
• obj.key는 obj["key"]와 같은 의미다.

5. 객체의 키를 변수로 할당하고 싶을 때 (ES6)

const key = 'tall'
const value = 180

const obj = {
  [key]: value
}

obj
// { tall: 180 }