16. 프로퍼티 어트리뷰트

 

internal slot / internal method

• ECMAScript 에서 사용하는 pseudo property / pseudo method
• 원칙적으로는 엔진의 내부 로직이라 개발자가 직접 접근할 수는 없음
  • 일부는 간접적으로 접근 가능
    e.g. 모든 객체가 가지는 내부 슬롯 [[Property]]

      -> 직접 접근은 불가하지만 \__proto__ 를 통해 접근 가능 
      ``` const object = {} ;
      o.[[Property]] // Uncaught SyntaxError 발생 
      o.__proto__ // Object.prototype 
      ```

property attribute

• 객체의 프로퍼티를 생성할때 기본값으로 자동 정의되는 내부 슬롯(JS 엔진이 관리)
• 프로퍼티의 상태(value, writable, enumerable, configurable) 를 나타냄
• [[Value]],[[Writable]],[[Enumerable]],[[Configurable]]
• 프로퍼티 어트리뷰트에는 (내부 슬롯이니까) 직접 접근 할수 없고, 대신 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 접근 가능

const person = {
    name: 'Yoojin'
};

person 객체에서 name 이라는 프로퍼티를 생성했기 때문에,
JS 엔진은 이 프로퍼티를 생성하면서 이 name 프로퍼티의 상태를 나타내기 위한 내부 슬롯 [[Value]],[[Writable]],[[Enumerable]],[[Configurable]] 를 기본값으로 정의함

name 프로퍼티의 값이 무엇인지, 갱신할 수 있는지, 열거할 수 있는지, 재정의할 수 있는지를 알기 위해서 직접 이 내부 슬롯들 (즉 property attribute들)에 접근할 수는 없지만, Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로는 접근할 수 있다

 

 

**프로퍼티 디스크립터 객체

• 프로퍼티 어트리뷰터 정보를 담고 있는 객체
• Object.getOwnPropertyDescriptor 메서드를 사용하면 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체를 반환하고, Object.getOwnPropertyDescriptors 메서드를 사용하면 모든 프로퍼티에 대한 프로퍼티 디스크립터 객체를 반환한다.

객체의 프로퍼티

데이터 프로퍼티와 접근자 프로퍼티로 구분

데이터 프로퍼티

• 일반적으로 우리가 알고 있는 키와 값으로 구성된 프로퍼티
• 일반적인 프로퍼티들이므로 위에서 다룬것과 같이 property attribute 를 갖는다 (아래 4개)
• [[Value]],[[Writable]],[[Enumerable]],[[Configurable]]
  → 프로퍼티 디스크립터의 value, writable, enumerable, configurable 값으로 접근 가능
  e.g. Object.getOwnPropertyDescriptor(객체,키) 가 반환한 값이 {name: 'Yoojin',writable:true
  , enumerable:true, configurable:true}라면 name 객체의 [[Value]]는 'Yoojin',[[Writable]]는 true,[[Enumerable]]는 true,[[Configurable]]는 true 인 것

value 값) 키를 통해 접근해서 읽거나 쓰는 값
writable 값) boolean 값이며 이 값에 의해 읽기 전용인지 아닌지가 결정됨
enumerable 값) boolean 값이며 이 값에 의해 열거 가능인지 아닌지가 결정됨. 예를 들어 Object.keys(객체) 를 출력해보면 enumerable 가 false 인 프로퍼티들은 나오지 않음
configurable 값) boolean 값이며 이 값에 의해 프로퍼티의 삭제나 값 변경 가능 여부가 결정됨

하루 있으면 까먹을 거고 이걸 알아두는게 엄청 중요할것 같지는 않지만
[[Writable]] true이고 [[Configurable]] false 이면 [[Value]]의 변경과 [[Writable]] 값을 false로 바꾸는 것은 가능

접근자 프로퍼티

• 자체적으로 갖고 있는 값은 없고, 접근자 함수(accessor function)로 구성된 프로퍼티
  • 접근자 함수: 다른 데이터 프로퍼티의 값을 읽거나 저장할때 호출되는 함수
• 접근자 프로퍼티도 아래 3개의 property attribute를 갖는다. 마찬가지로 getOwnPropertyDescriptor 메서드가 반환한 property descriptor 객체의 프로퍼티를 통해 접근할 수 있다.
  • [[Get]],[[Set]],[[Enumerable]],[[Configurable]]
    → 프로퍼티 디스크립터의 get, set, enumerable, configurable 값으로 접근 가능
    → 위와 같이 접근자 프로퍼티인 fullName 의 프로퍼티 디스크립터 객체를 보면 value와 writable은 없고, get과 set 함수가 있다
• get 값) 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을때 호출되는 함수 (이 getter 함수가 호출된 그 결과가 프로퍼티 값으로 반환되는 것)
• set 값) 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 함수 (이 setter 함수가 호출된 그 결과가 프로퍼티 값으로 저장되는 것)
• enumerable 값) 데이터 프로퍼티와 동일 (boolean 값이며 이 값에 의해 열거 가능인지 아닌지가 결정됨)
• configurable 값) 데이터 프로퍼티와 동일 (boolean 값이며 이 값에 의해 프로퍼티의 삭제나 값 변경 가능 여부가 결정됨)

어쨌든 접근자프로퍼티도 '프로퍼티' 니까 {객체}.{프로퍼티키} 처럼 사용한다 (함수 호출처럼 괄호 붙여서 호출하지 않음) 이렇게 접근자 프로퍼티로 값에 접근하면 내부적으로는 [[Get]]의 값인 getter 함수를 호출해서 그 결과를 반환

프로퍼티 정의

아래와 같이 defineProperty 를 사용해서 직접 프로퍼티 어트리뷰트를 정의하는 것도 가능

Object.defineProperty(객체명, 프로퍼티키, {
  value: '',
  writable: true, 
  enumerable: true, 
  configurable: true
})