인프런 커뮤니티 질문&답변

신준석님의 프로필 이미지
신준석

작성한 질문수

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[순수JS 2] 탭 1

객체속성 접근에 관해 질문입니다.

해결된 질문

작성

·

160

0

.map((tabType) => ({tabType, tabLabel: TabLabel[tabType]}))

해당 코드에서
TabLabel[tabType] -> TabLabel.tabType 으로 변경하면 undefined 가 출력이 되는데 이유를 모르겠습니다.



//
const TabLabel = {
[TabType.KEYWORD]: '추천 검색어',
[TabType.HISTORY]: '최근 검색어'
}

console.log(TabLabel['KEYWORD']);
console.log(TabLabel.KEYWORD);

이런식으로 콘솔에 찍어보면 잘 출력이 됩니다.

스코프와 관련이 있나요?

답변 1

1

김정환님의 프로필 이미지
김정환
지식공유자

TabLabel 객체를 보시면 문자열 값을 가지는 두 개 속성이 있습니다.

  • TabLabel[TabType.KEYWORD]: '추천 검색어'
  • TabLabel[TabType.HISTORY]: '최근 검색어'

변수로 객체 키에 접근한 이 객체는 결국 이러한 모습이 될거에요.

  • TabLabel.KEYWORD: '추천 검색어'
  • TabLabel.HISTORY: '최근 검색어'

질문에 총 네 가지 접근법이 있는데요. 이런 차이가 있습니다.

  • TabLabel[tabType]: tabType 변수에 따라 문자열 혹은 undefined가 될 수 있습니다.
  • TabLabel.tabType: tabType 속성이 없으니깐 undefined가 됩니다.
  • TabLabel['KEYWORD']: 문자열("추천검색어")
  • TabLabel.KEYWORD: 문자열("추천검색어")

 

신준석님의 프로필 이미지
신준석

작성한 질문수

질문하기