[TIL/모던 자바스크립트 Deep Dive] 2023/07/17

16장. 프로퍼티 어트리뷰트 🟢

16-3. 데이터 프로퍼티와 접근자 프로퍼티 🟡

프로퍼티는 ``데이터 프로퍼티`와 `접근자 프로퍼티``로 구분 가능하다.

데이터 프로퍼티 🟣

데이터 프로퍼티는 value, writable, enumerable, configurable 등과 같은 '프로퍼티 어트리뷰트'를 갖는다. 앞서 프로퍼티 어트리뷰트는 "프로퍼티에 대한 기본 세팅값이다." 정도로 정리한 바 있다. 관련해서 예제 코드를 살펴봤다.

value 프로퍼티의 값은 'Lee'이고, 나머지 프로퍼티의 값은 모두 true다. 달리 표현하면, 프로퍼티 어트리뷰트 [[value]]의 값은 'Lee'이고, 프로퍼티 어트리뷰트인 [[writable]], [[enumerable]], [[configurable]]의 값은 true이다.

이처럼 프로퍼티가 생성될 때 [[value]]의 값은 프로퍼티 값으로 초기화되며, [[writable]], [[enumerable]], [[configurable]]의 값은 true로 초기화된다. 프로퍼티를 동적 추가해도 마찬가지이다.

접근자 프로퍼티 🟣

접근자 프로퍼티(accessor property)는 자체적으로는 값을 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는, 접근자 함수로 구성된 프로퍼티다.

일단 정의부터가 어렵다.

접근자 프로퍼티에는 [[Get]], [[Set]], [[enumerable]], [[configurable]] 등이 있다. 접근자 함수는 Getter/Setter 함수라고도 부른다. 코드를 살펴봤다.

잠깐 🟣

책에서 설명하는, 접근자 프로퍼티에 대한 개념이 이해되지 않았다. 왜 그럴까 곰곰이 생각해보니, 프로퍼티를 너무 지엽적으로 인지하고 있었다.

"프로퍼티는 '객체 내부에 저장된 값 또는 함수'다."라는 정의로 접근해야 이해가 가능해진다. 최소한 지금 파트를 학습할 때에는 객체는 프로퍼티의 container일 뿐이다.

위 코드를 다시 보면, person에 할당된 객체는, 데이터 프로퍼티와 접근자 프로퍼티를 담고 있는 container이다.

그러니까, 원래 알고 있던 'key:value' 형태도 프로퍼티이고, get 또는 set 접근자 함수로 구성된 fullName도 프로퍼티이다.

18번 줄은 이해에 어려움이 없으니 설명을 넘어간다.

22번과 23번은 setter에 관한 코드이다. 접근자 프로퍼티(=fullName)를 통해 값을 '저장'하려고 시도하면 setter가 호출된다. 따라서 공백을 기준으로 각각 firstName과 lastName에 Heegun과 Lee가 저장된다. 그렇기에 person을 콘솔에 찍어보면 변경된 firstName과 lastName, 그리고 fullName에 대한 정보가 반환된다.

27번 코드는 getter에 관한 코드이다. 값을 참조할 때(=읽을 때) 호출되는 함수이고, 콘솔에는 getter 함수의 내용에 맞게 firstName과 lastName이 반환된다.(9번 코드 참고)

31번 코드는 앞서 살펴본 것처럼, value는 Heegun으로 초기화되고 나머지는 true로 초기화된다. 데이터 프로퍼티이기 때문이다.

35번 코드에서는, 접근자 프로퍼티에 대한 console이기 때문에 자체적으로는 값을 갖지 않는다는 점을 확인할 수 있다. 접근자 함수로 구성되어 있다는 점은 확인할 수 있다.

오늘 총정리

내일 🟣

접근자 프로퍼티에 대한 내용이 조금 남아있으니 먼저 정리한다. 정리가 끝난 후 '16-4: 프로퍼티 정의'를 학습한다.

번아웃 비슷한 게 왔었는데, 불씨에 기름을 부으면 꺼진다는 사실을 잊고 살았다. 불씨를 조심스럽게 찾아서 호호 불어줘야 한다. 누군가의 부드러운 부채질도 당연히 도움이 된다. "조심조심, 하지만 매일매일"