[js 딥다이브] 16장 프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드

• JS엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드임
• ECMAScript 사양에서 이중 대괄호 [[ ... ]]로 감싼 이름들이 내부 슬롯과 내부 메서드임
• 내부 슬롯과 내부 메서드는 JS 엔진 내부 로직이므로 원칙적으로 접근 불가능
• Prototype의 경우만 __proto__를 통해 간접적으로 접근 가능

16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

• JS엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함.
• 프로퍼티 상태 👉 프로퍼티의 값, 값의 갱신여부, 열거 가능 여부, 재정의 가능 여부
• 프로퍼티 어트리뷰트 👉 Value, Writable, Enumerable, Configurable
• 직접 접근은 안되니만 Object.getOwnPropertyDescriptor나 Object.getOwnPropertyDescriptors 메서드를 사용하여 간접적으로 확인 가능

const person = {
 name: 'Lee'
};
// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
/**
* getOwnPropertyDescriptor(o: any, p: PropertyKey): PropertyDescriptor | undefined;
* 지정된 객체의 고유 프로퍼티 디스크립터를 가져옵니다.
* 고유 프로퍼티 디스크립터는 객체의 프로토타입에서 상속되지 않고 직접 정의된 디스크립터입니다.
* @param o 프로퍼티를 포함하는 객체입니다.
* @param p 프로퍼티의 이름입니다.
*/
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// {value: "Lee", writable: true, enumerable: true, configurable: true}

const person = {
 name: 'Lee'
};

// 프로퍼티 동적 생성
person.age = 20;

// 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다.
/**
* getOwnPropertyDescriptors<T>(o: T): {[P in keyof T]: TypedPropertyDescriptor<T[P]>} & { [x: string]: PropertyDescriptor };
* 객체의 모든 고유 프로퍼티 디스크립터를 포함하는 객체를 반환합니다.
* @param o 프로퍼티와 메서드를 포함하는 객체입니다. 이것은 생성한 객체 또는 기존 Document Object Model (DOM) 객체일 수 있습니다.
*/
console.log(Object.getOwnPropertyDescriptors(person));

/*
{
 name: {value: "Lee", writable: true, enumerable: true, configurable: true},
 age: {value: 20, writable: true, enumerable: true, configurable: true}
}
*/

16.3 데이터 프로퍼티와 접근자 프로퍼티

• 데이터 프로퍼티 키와 값으로 구성된 일반적인 프로퍼티
• 접근자 프로퍼티 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할때 호출되는 접근자 함수로 구성된 프로퍼티

16.3.1 데이터 프로퍼티

• 프로퍼티 어트리뷰트는 JS엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의됨

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
Value	value	- 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값 - 프로퍼티 키를 통해 프로퍼티 값을 변경하면 Value에 값을 재할당. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장함.
Writable	writable	- 프로퍼티의 값의 변경 가능 여부(불리언) -[[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없는 읽기 전용 프로퍼티가 됨
Enumerable	enumerable	- 프로퍼티의 열거 가능여부 (불리언) - Enumerable의 값이 false인 경우 해당 프로퍼티는 for ... in문이나 Object.keys 메서드등으로 열거 할 수 없음
Configurable	configurable	- 프로퍼티의 재정의 가능 여부 (불리언) - Configurable의 값이 false인 경우 해당 프로퍼티의 삭제, 값의 변경이 금지됨. 단 [[Writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 변경하는 것은 허용됨.

• 프로퍼티가 생성될 때 [[Value]]의 값은 프로퍼티 값으로 초기화되며 다른 속성은 true로 초기화됨. 동적 프로퍼티가 추가되도 마찬가지 (위 예제 참고)

16.3.2 접근자 프로퍼티

• 접근자 프로퍼티 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티
• 다음과 같은 프로퍼티 어트리뷰트가 있음

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
Get	get	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수. 접근자 프로퍼티 키로 프로퍼티 값에 접근하면 프로퍼티 어트리뷰트 Get의 값(getter 함수)이 호출되고 그 결과가 프로퍼티 값으로 반환됨
Set	set	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수. 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 프로퍼티 어트리뷰트 [[set]]의 값(setter 함수)이 호출되고 그 결과가 프로퍼티 값으로 저장됨
Enumerable	enumerable	데이터 프로퍼티 [[Enumerable]]과 같음
Configurable	configurable	데이터 프로퍼티 [[Configurable]]과 같음

• 접근자 함수는 getter/setter 함수라고도 부름
• 접근자 프로퍼티는 getter와 setter 함수를 모두 정의할 수 있고 하나만 정의할 수도 있음.

const person = {
 // 데이터 프로퍼티
 firstName: 'Hana',
 lastName: 'Lee',
 // fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
 // getter 함수
 get fullName() {
  return `${this.firstName} ${this.lastName}`;
 },
 // setter 함수
 set fullName(name) {
  // 배열 디스트럭처링 할당: "31.1 배열 디스트럭처링 할당" 참고
  [this.firstName, this.lastName] = name.split(' ');
 }
};

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조.
console.log(person.firstName + ' ' + person.lastName); // Hana Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다.
person.fullName = 'Girl Lee';
console.log(person); // {firstName: "Girl", lastName: "Lee"}

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다.
console.log(person.fullName); // Girl Lee

// firstName은 데이터 프로퍼티다.
// 데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
// 프로퍼티 어트리뷰트를 갖는다.
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log(descriptor);
// {value: "Girl", writable: true, enumerable: true, configurable: true}

// fullName은 접근자 프로퍼티다.
// 접근자 프로퍼티는 [[Get]], Set, [[Enumerable]], [[Configurable]]
// 프로퍼티 어트리뷰트를 갖는다.
descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);

// {get: ƒ, set: ƒ, enumerable: true, configurable: true}

16.4 프로퍼티 정의

Object.defineProperty, Object.defineProperties

const person = {};
// 데이터 프로퍼티 정의
Object.defineProperty(person, 'firstName', {
 value: 'Ungmo',
 writable: true,
 enumerable: true,
 configurable: true
});

Object.defineProperty(person, 'lastName', {
 value: 'Lee'
});

// 접근자 프로퍼티 정의
Object.defineProperty(person, 'fullName', {
 // getter 함수
 get() {
  return `${this.firstName} ${this.lastName}`;
 },

 // setter 함수
 set(name) {
  [this.firstName, this.lastName] = name.split(' ');
 },
 enumerable: true,
 configurable: true
});

16.5 객체 변경 감지

구분	메서드	프로퍼티 추가	프로퍼티 삭제	프로퍼티 값 읽기	프로퍼티 값 쓰기	프로퍼티 어트리뷰트 재정의
객체 확장 금지	Object.preventExtensions	✕	◯	◯	◯
객체 밀봉	Object.seal	✕	✕	◯	◯	✕
객체 동결	Object.freeze	✕	✕	◯	✕	✕

불변 객체를 만들려면 재귀적으로 .freeze를 사용해야함.