TIL-26_2020.04.23(Object[key] vs Object.key)

계속 헷갈리는 기초. 더이상 헷갈리지 않기 위해 작성하는 TIL ;;

제일 처음 자바스크립트 객체 개념을 배울 때 객체의 속성에 접근, 추가, 삭제하는 방법을 익혔었다. 근데 왜 자꾸 헷갈리는 것인지 내 자신이 답답해서 아 제발 이제 그만 헷갈려라. 하면서 맨날 MDN에서 검색하고 아, 이거였지 하고 나중에 또 헷갈려해서 오늘 진짜 그만 헷갈리라고 블로깅한다. (나에게 상당히 빡쳤음)

사실 며칠전 자료구조의 하나인 Queue 로직을 구현하는 문제를 풀다가 큐를 배열이 아닌 객체로 구현해야하는 조건을 만족시켜야 했는데, 부끄럽지만 얼굴이 시뻘개졌었다. 아 이거 왜 모르지? 이거 모르면 안되는거 같은데..싶어서.

우여곡절 끝에 클래스로 선입선출이라는 큐의 로직 구현에는 성공했지만, 객체의 속성에 접근하는 방법을 다시 정리한다.

• 브라켓 노테이션 : Object['key']
• 닷 노테이션 : Object.key

닷노테이션에서 숫자가 먼저 나오거나 연산자가 들어가는 경우 제대로 해석(?)되지 않기 때문에라도 브라켓 노테이션이 필요하다.

내가 헷갈린 부분은 Object[‘key’] 와 Object[key] 임.

• Object[key] 는 객체의 실제 속성에 직접,바로 접근하는 Object.key나 Object[‘key’]와는 달리 변수로 속성에 접근이 가능하다. 아래 코드를 보면 Object[key]의 결과값이 어떻게 나오는지 알 수 있다.

const a = {
 b : 1,
 c : 2
}
const b = 'c'
console.log(a[b] + ' vs ' + a.b) // 2 vs 1

그리고 또 아래와 같이 반복문으로 객체의 속성에 접근할 때, a.key를 콘솔로그 찍어보면 undefined가 나오는데 이는 객체a의 스트링'key'라는 속성을 조회하기 때문이다.

const a = {
  b  : 1,
  c  : 2
}
for (key in a) {
 console.log(a.key) // undefined, undefined
 console.log(a[key])// 1,2
}

제발! 이제는 안헷갈리겠지.. 처음 객체 속성에 대해서 배울 때 변수로 접근가능하다는 말이 제대로 이해되지 않았던거 같다. 이렇게 기초를 대충 넘기면 나중에 끙끙댄다는 것을 알게되었고.. 수고했다 나자신.