[JavaScript] Object.key 결과가 undefined 일 때

✅Object[‘key’] 와 Object.key의 차이
✅Object.key의 특성과 한계
✅Object[‘key’] 형식을 추천하는 이유

Obj.key가 undefined 인 이유?

const memberObj = {
    manager:'egoing',
    dev: 'soyee',
    designer: 'nee'
}

for (let name in memberObj) {
    console.log(memberObj.name) //undefined
}

memberObj.name이 undefined인 이유는 JavaScript에서 객체 속성에 접근할 때, 점 표기법(.)을 사용하는 경우 해당 속성 이름이 명시적으로 지정되어야 하기 때문
== Obj에 name이라는 속성이 직접적으로 존재했어야 했다.

여기서 name은 반복문의 변수로서 사용되기 때문에 memberObj.name은 실제로는 memberObj['name']과 동일한 동작을 수행한다.

올바르게 객체의 속성을 출력하려면 memberObj[name]으로 작성해야 한다.

Object[‘key’] vs Object.key 조금 더 알아보기

js에서 객체의 property는 모두 문자열이어야 한다

1번과 2번 형식 모두 쓸 수 있지만 프로퍼티는 ‘문자열’이다

1)
var memberObj = {
    manager: 'egoing',
    dev: 'soyee',
    designer: 'nee'
}

2)
var memberObj = {
    ‘manager’: 'egoing',
    ‘dev’: 'soyee',
    ‘designer’: 'nee'
}

예외) 속성 이름이 number인 경우 그대로 사용 가능하다

var a = {
    a : 1,
    2 : 2
}

console.log(a[2]) //2
console.log(a['2']) //2
console.log(a.2) //error

주의⚠️: Object.key 표현에서 숫자가 먼저 나오면 에러가 발생한다.
→ Object[key] 사용 권장

Obj.key 형식의 단점++

아래 예시를 보자
마이너스 기호가 있을때 Obj.key 형식에선 인식을 하지 못한다

var a = {
 “a” : 1,
 “b-c”: 2,
 “0d” : 3,
 “d0” : 4
}

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

Obj[’key’]에선 문자열 형식이라면 마이너스 기호, space 모두 인식한다

var a = {
 “a” : 1,
 2 : 2, 
 “b-c”: 3, // -
 “ — d”:4, // — 
 “ e “:5 // space
}

따라서 Obj[’key’] 형식을 사용하는 것을 추천한다!

참고자료

---

포스트 작성에 많은 도움이 되었습니다👍
JavaScript Object[‘key’] vs Object.key 차이