16장 프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드

• 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티pseudo property와 의사 메서드pseudo method다. 
• 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.
•  원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. 예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 원칙적으로 직접 접근할 수 없지만 [[Prototype]] 내부 슬롯의 경우, __proto__를 통해 간접적으로 접근할 수 있다.

"내부 슬롯과 내부 메서드는 자바스크립트의 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다."라는 말이 좀 어려웠다. 처음에는 한번쯤 들어본 의사코드의 '의사'와 같은 의미인가 싶어 찾아봤지만, 결론적으로 의사 코드, 의사 프로퍼티, 의사메서드는 같은 단어('의사' - pseudo:가짜)를 사용하지만 맥락적으로는 다른 의미이다. 즉, 의사코드의 '의사'란 인간이 이해하기 쉽게 알고리즘을 설명하기 위해 사용되는 것으로, 실제 프로그래밍 코드가 아니라 추상적인 형태의 코드 - 가짜코드를 의미한다. 하지만 의사 프로퍼티와 의사 메서드의 '의사'란 본질적으로 객체가 가지고 있지는 않지만 프로토타입체이닝을 통해 상속받아서 마치 자신의 것처럼 사용할 수 있는 프로퍼티와 메서드란 의미에서 (pseudo:가짜)를 사용했다. "객체.length"가 의사프로퍼티에 해당하고, "객체.push()"가 의사메서드에 해당한다.

 

 

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

• 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 
• 프로퍼티의 상태란 프로퍼티의 값value, 값의 갱신 가능 여부writable, 열거 가능 여부enumerable, 재정의 가능 여부configurable를 말한다.
• 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값meta-property인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다. 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor와 Object.getOwnPropertyDescriptors 메서드를 사용하여 간접적으로 확인할 수는 있다.

/*Object.getOwnPropertyDescriptor 메서드를 호출할 때 첫 번째 매개변수에는 객체의 참조를 전달하고,
두번째 매개변수에는 프로퍼티 키를 문자열로 전달한다.*/ 

const person = {
 name: 'Lee'
};
// 프로퍼티 동적 생성
person.age = 20;
// 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다.
console.log(Object.getOwnPropertyDescriptors(person));

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

/*이때 Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 
디스크립터PropertyDescriptor 객체를 반환한다. 만약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 
대한 프로퍼티 디스크립터를 요구하면 undefined가 반환된다.*/

 

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

• 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 분화된다.
  • 데이터 프로퍼티: 키와 값으로 구성된 일반적인 프로퍼티다.
  • 접근자 프로퍼티: 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수(getter/setter 함수라고도 부른다.)로 구성된 프로퍼티다.

 

• 데이터 프로퍼티가 가지는 프로퍼티 어트리뷰트는 다음과 같다.

프로퍼티 어트리뷰트	프로퍼티 디스크립터객체의 프로퍼티	설명
[[Value]]	value	·프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다.  ·프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당한다. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다.
[[Writable]]	writable	·프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 갖는다. ·[[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없는 읽기 전용 프로퍼티가 된다. ·[[Writable]]의 값이 false일때 값을 변경하려하면 에러는 발생하지 않고 무시된다.
[[Enumerable]]	enumerable	·프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는다. ·[[Enumerable]]의 값이 false인 경우 해당 프로퍼티는 for...in문이나 Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	configurable	·프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 갖는다. ·[[Configurable]]의 값이 false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값의 변경이 금지된다. 단, [[Writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용된다. ·[[Configurable]]의 값이 false일때 값을 삭제하려하면 에러는 발생하지 않고 무시된다. ·[[Configurable]]의 값이 false일때 해당 프로퍼티를 재정희하려하면 다음과 같은 에러가 발생한다. // Object.defineProperty(person, 'lastName', { enumerable: true }); // Uncaught TypeError: Cannot redefine property: lastName

 

• 접근자 프로퍼티가 가지는 프로퍼티 어트리뷰트는 다음과 같다.

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

 

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

descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
// {get: ƒ, set: ƒ, enumerable: true, configurable: true}

/*접근자 프로퍼티는 getter와 setter 함수를 모두 정의할 수도 있고 하나만 정의할 수도 있다. 만약 위의 예제에서 
게터함수만 정의되었고, 세터함수는 정의되지않았다면 콘솔에 다음과 같이 출력될 것이다.*/
descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
// {get: ƒ, set: undefined, enumerable: true, configurable: true}

• person 객체의 firstName과 lastName 프로퍼티는 일반적인 데이터 프로퍼티다. 메서드 앞에 get, set이 붙은 메서드가 있는데 이것들이 바로 getter와 setter 함수이고, getter/setter 함수의 이름 fullName이 접근자 프로퍼티다. 접근자 프로퍼티는 자체적으로 값(프로퍼티 어트리뷰트 [[Value]])을 가지지 않으며 다만 데이터 프로퍼티의 값을 읽거나 저장할 때 관여할 뿐이다. 

 

프로퍼티 정의

• 프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다. 예를 들어, 프로퍼티 값을 갱신 가능하도록 할 것인지, 프로퍼티를 열거 가능하도록 할 것인지, 프로퍼티를 재정의 가능하도록 할 것인지 정의할 수 있다. 이를 통해 객체의 프로퍼티가 어떻게 동작해야 하는지를 명확히 정의할 수 있다.
• Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다. 인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체를 전달한다. 한번에 하나의 프로퍼티만 정의할 수 있다.
• Object.defineProperties 메서드를 사용하면 여러 개의 프로퍼티를 한번에 정의할 수 있다.

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

let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log('firstName', descriptor);
// firstName {value: "Ungmo", writable: true, enumerable: true, configurable: true}

프로퍼티 디스크립터 객체의 프로퍼티	대응하는 프로퍼티 어트리뷰트	생략했을 때의 기본값
value	[[Value]]	undefined
get	[[Get]]	undefined
set	[[Set]]	undefined
writable	[[Writable]]	false
enumerable	[[Enumerable]]	false
configurable	[[Configurable]]	false

 

객체 변경 방지

• 자바스크립트는 객체의 변경을 방지하는 메서드들을 제공한다. 객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다르다.

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

• 확장이 가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.
• 밀봉된 객체인지 여부는 Object.isSealed 메서드로 확인할 수 있다.
• 동결된 객체인지 여부는 Object.isFrozen 메서드로 확인할 수 있다.
•  Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다. 객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체 5를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다