[JS] .(점)은 뭘까? 프로퍼티 접근자

Chanki Hong·2022년 11월 23일
0

JavaScript

목록 보기
24/30
post-thumbnail

JS를 알아가면서 매우 당황스러웠던 순간은 . 뒤에 달라붙는 영어들.
객체를 배우면서 프로퍼티를 접근할 때 이용한다는 것을 알고 조금 후련했다.
이용법은 알겠는데 다양한 코드를 보고 일관된 무언가가 없었다.
이때까지만 해도 특정한 객체에 명시된(속한) 프로퍼티만을 의미하는 줄 알았다.

배열(객체)에서 여러 가지 메소드들을 쓰는데, 특정한 배열(객체)에 속한 메소드(프로퍼티)가 아닌 메소드 들이었다.
공부하다 보니 배열이라는 개념에 내장되어있는 메소드 였다.

결과적으로 프로퍼티에 접근할 때 이용하는데, 그 프로퍼티는 특정 객체에 속한 것이거나 속하지 않은 내장된 프로퍼티일 수 있다는 것.

찾아보니 Property accessors(접근자) 중 하나였다.


프로퍼티 접근자(Property accessors)

  • 점 또는 괄호 표기법으로 객체의 프로퍼티에 접근하게 함.

점 표기법(Dot notation)

  • . 을 이용한 접근.
  • 문자열 프로퍼티에 대해 항상 동작. (유효한 식별자 일때)
const obj = {};
obj.color = 'yellow';
console.log(obj); // { color: 'yellow' }

괄호 표기법(Bracket notation)

  • [] 를 이용한 접근.
  • 점 표기법은 모두 표현 가능.
const obj = {};
obj['color'] = 'yellow'; // 문자열 프로퍼티는 따옴표가 필요함.
console.log(obj); // { color: 'yellow' }
  • 또한 유효한 식별자가 아닌 이름 접근시 사용.
const obj = {};
obj['not an identifier'] = 3; // 띄어쓰기가 포함된 유효한 식별자가 아닌 이름.
console.log(obj['not an identifier']); // 3.
  • 심볼 프로퍼티에 접근시 사용.
const obj = {};
const SIZE = Symbol();
obj[SIZE] = 8;
console.log(obj[SIZE]); // 8
  • 배열에서 인덱스를 접근하는 원리와 동일.

배열이 객체라고 하지만, 요소를 가지고 올 때 대괄호 형태로 접근해 의문이었는데,
프로퍼티 접근자를 정리하면서 자연스럽게 의문이 사라졌다.
괄호 표기법을 이용한 것이었다.

또한 예제에서 객체의 프로퍼티를 종종 대괄호로 호출하는 것을 보고 객체를 배열처럼 호출한다고 이해했지만 그게 아니라 프로퍼티 접근자의 표기법을 점 표기법에서 괄호 표기법으로 바꾼 것뿐이었다.

다양한 개념이 서로 조금씩 영향을 주기 때문에 배우기 방대하지만 하나의 실마리를 풀면 이렇게 같이 이해되는 개념이 있어서 행복하다.


0개의 댓글