[JavaScript] 객체의 속성에 접근하는 점 표기법(마침표 표기법)과 대괄호 표기법 (ft. 좋은 코드)
객체의 프로퍼티에 접근하는 두 가지 방법
객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다.
const name = {
firstName: 'olivia',
lastName: 'kim'
}
위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.
- 점 표기법: name.firstName
- 대괄호 표기법: name['firstName']
점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기
대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다.
프로퍼티의 키가 숫자인 경우
다만, 프로퍼티 키가 숫자일 경우에는 그대로 사용할 수 있다. 이때 점 표기법으로는 키가 숫자인 프로퍼티에 접근이 불가능하다.
변수를 이용해 프로퍼티에 접근할 경우
변수에 담겨있는 값을 이용해 프로퍼티에 접근할 때는 대괄호 표기법을 사용한다. 점 표기법으로는 변수와 같이 동적인 값으로 접근이 불가능한데, 이때 ReferenceError가 발생하는게 아니라 undefined를 반환한다.
점 표기법과 대괄호 표기법 중 어떤걸 사용해야 할까?
왜 굳이 두 가지 방법으로 나눠서 접근할까? 와 그럼 둘 중에 뭘 사용하는게 더 좋을까? 에 대한 궁금증이 있었는데 이전에 코드 리뷰를 받으며 궁금증에 대한 해결책과 감사한 조언을 들을 수 있었다.
먼저, 일반적으로는 점 표기법을 사용하는 것이 좋다. 점 표기법을 사용해 객체에 접근하고 있다는 것을 시각적으로도 알 수 있고, 옵셔널 체이닝(?.)과도 형식이 같기 때문이다.
const obj = {
name: 'olivia'
age: 20
}
const value = ...(조건)... ? 'name' : 'age'
console.log(obj[value]) // 위의 삼항연산자 조건에 따라 다른 값을 출력함
대괄호 표기법을 사용하는 경우는 호출하는 키의 값이 동적일 때, 단순히 동적인 값을 담는 것 뿐만 아니라 이 코드를 읽는 상대 개발자에게도 '동적인 값이 들어갈 것이다' 라는 의미를 알려주기 위해 사용할 수 있다.
코드는 동작하는 것만이 존재 목적은 아니다.
코드는 개발자를 위한 문서이기도 하다.
따라서 사람이 이해할 수 있는 코드, 가독성이 좋은 코드가 좋은 코드다.
/ 모던 자바스크립트 딥 다이브, p.157
코드 리뷰를 해주시던 팀장님이 '좋은 코드는 나 뿐만 아니라 다른 사람이 봤을 때도 내 의도를 이해할 수 있는 코드가 좋은 코드다.' 라고 말씀해주셨다. 모던 자바스크립트 딥 다이브 책에도 위와 같이 동일한 말이 있어 다이어리에 적어둔 적이 있었다. 다른 사람이 봤을 때도 잘 이해할 수 있는 코드가 어떤건지 고민을 많이 했는데, 이런 객체 속성 표기법 하나에도 내가 어떻게 코드를 진행하고 싶은지를 나타낼 수 있다는 것을 알게되었다. 거창한게 아니라 작은 정렬 하나 하나가 모여 가독성 좋은 코드가 된다는 것도!