[JavaScript] 객체의 프로퍼티에 접근하는 방법

주절 주절

프로젝트 진행 중 map을 돌릴 때 각각의 컴포넌트에 map을 돌리는 객체의 프로퍼티가 아닌 외부 객체의 프로퍼티를 props로 전달해 주고 싶었다. 이 정도는 쉽지라고 생각하면서 하는데 잘되지 않는 것이었다! 템플릿 리터럴을 사용해서 Dot Notation로 프로퍼티에 접근하려고 했는데 해당 객체의 프로퍼티가 아니라 문자열이 자꾸 props로 전달이 되었다. 구글링을 해봐도 도무지 해결법을 모르겠어서 멘토님께 질문을 하러 갔는데 생각보다 너무 쉽게 해결이 되었다.... 해결법은 바로 Bracket Notion 항상 Dot Notation으로만 객체의 프로퍼티에 접근해서 자주 사용하지 않던 Bracket Notion은 머리 저 구석에 보이지 않는 곳에 숨어 있었다. 그래서 나와 같은 어려움을 겪을 사람들들을 위해 객체의 프로퍼티에 접근하는 방법을 소개하도록 하겠다.

객체의 프로퍼티에 접근하는 방법

객체의 프로퍼티에 접근하는 방법은 두 가지가 있다. Dot Notation 과 Bracket Notation이다.

Dot Notation(점 표기법)

const name = {
  first: 'Bbangho',
  last: 'Kim'
}

console.log(name.first); // 'Bbangho'
console.log(name.last); // 'Kim'

const firstName ='first'; 

console.log(name.firstName); // undefined

장점은 가독성이 좋고 간결하게 작성할 수 있어 자주 사용되는 방법이다. 하지만 위에 주절 주절에서 내가 겪은 문제처럼 변수를 식별자로 사용할 수 없다 🤯

Bracket Notion(괄호 표기법)

const name = {
  first: 'Bbangho',
  last: 'Kim'
}

console.log(name['first']); // 'Bbangho'
console.log(name['last']); // 'Kim'

const firstName ='first';

console.log(name[firstName]); // 'Bangho'

. 대신 []를 사용해야 해서 살짝 귀찮지만(?).... Dot Notation과 다르게 변수를 식별자로 사용해 객체의 프로퍼티에 접근이 가능하다~ 🎉