객체 속성 접근시 브라켓 이용(vs. 닷 오퍼레이터)

Question

<JS로 HTML, CSS 조작> 강의편에서 객체와 속성 코드 적으실 때 hours.textContent = remainingObj["remainingHours"]; 와 같이 브라켓을 이용해서 속성에 접근하셨는데, 객체 속성 접근할 때 닷 오퍼레이터말고 브라켓을 이용하신 이유가 있나요? 아니면 단순한 개인의 취향 문제인지요 ㅎㅎ 이번 강의에서 처음 알게된 내용이라 궁금해서 여쭤봅니다 :)

노원두 · Answer

안녕하세요! Chloe Hyeyoon Jo 님! 특별한 이유라기 보다는, 이러한 방법도 있다라는 것을 함께 알려드리고자 제시되었습니다!^^ 일반적으로는 remainingObj.remainingHours 와 같은 형태를 사용하게 돼요! 다만, 우리는 이제 새로운 방법 remainingObj["remainingHours"] 와 같은 방법을 알게 되었으니 이러한 방법이 언제 사용되는지도 함께 공부하시면 좋겠죠?!^^   다음의 방법으로 구분하여 사용하시면 됩니다! // 1. 원하는 키에 직접 접근할 수 있는 경우 const profile = { name: "철수" } console.log(profile.name) // 철수 => 물론, profile["name"] 도 가능해요! // 2. 원하는 키가 변수에 들어가 있는 경우 const qqq = "name" const profile = { name: "철수" } console.log(profile[qqq]) // 철수 => qqq안에 "name"이 들어있으므로, profile[qqq]는 profile["name"]이 되며, 이러한 상황에서 일반적으로 대괄호[] 로 접근합니다!   여기서 가장 많이 하시는 질문 및 오해 중에 하나가, profile.qqq 하면 되는 것 아닌가요?! 라는 질문이에요! 하지만, profile.qqq가 되려면 profile이 아래와 같아야겠죠?! const profile = { qqq: "철수" } console.log(profile.qqq) // 철수   따라서, 상황에 맞게 적절히 사용하도록 연습해주세요!^^