[JS] 모던 자바스크립트 Deep Dive - 16. 프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드

이중 대괄호로 감싼 이름들

• 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(Pseudo Property)와 의사 메서드(Pseudo Method)이다. 
• ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 

• 내부 슬롯 & 내부 메서드 는 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.
• 즉, 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지 않는다.
• 단, 일부 내부 슬롯 & 메서드에 한하여 접근할 수 있는 수단을 제공한다.
  • [[Prototype]] 내부 슬롯은 __proto__ 를 통해 간접적으로 접근 가능하다.

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

• 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 
• 프로퍼티 상태
  • 값 (Value)
  • 값의 갱신 가능 여부 (Writable)
  • 열거 가능 여부 (Enumerable)
  • 재정의 가능 여부 (Configurable)

Javascript Property Descriptor Object

프로퍼티 어트리뷰트 정보를 제공하는 객체

• 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined를 반환한다.
• 기본적으로 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체를 반환한다.

프로퍼티 어트리뷰트

• 자바스크립트 엔진이 관리하는 내부 상태 값(Meta-Property)인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다. 
• 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다. 

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

✅데이터 프로퍼티(Data Property)

키와 값으로 구성된 일반적인 프로퍼티. 

• 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티이다.
• 아래와 같은 프로퍼티 어트리뷰트를 가지며 이는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다.
• 프로퍼티가 생성될 때 [[Value]]의 값은 프로퍼티 값으로 초기화되며 [[Writable]], [[Enumerable]], [[Configurable]]의 값은 true로 초기화된다. 
  • 이는 프로퍼티를 동적 추가해도 마찬가지이다. 

✅접근자 프로퍼티(Accessor Property)

자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수(Accessor Function)로 구성된 프로퍼티 

• 접근자 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 
• 접근자 함수는 getter/setter 함수라고도 부른다. 

프로퍼티 정의

새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것

• Object.defineProperty 메서드를 사용하여 프로퍼티의 어트리뷰트를 정의할 수 있다.
• 인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체를 전달한다. 

const person = {}: 
// 데이터 프로퍼티 정의
Object.defineProperty(person, 'firstName' , { 
	value: 'Ungmo' , 
	writable: true, 
	enumerable: true, 
	configurable: true 
}); 
Object.defineProperty(person, 'lastName' , { 
	value: 'Lee' 
});
let descriptor = Object.getOwnPropertyoescriptor(person, 'firstName'); 
console.log( 'firstName' , descriptor); 
// firstName {value: "Ungmo", writabte: true, enumerable: true, configurable: true}

// 디스크립터 객쳬의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
descriptor = Object.getOwnpropertyDescriptor(person, 'lastName'); 
console.log( 'lastName' , descriptor); 
// lastName {value: "Lee", writable: false, enumerable: false, configurable: false}

// [[Enumerable]]의 값이 false인 경우 
// 해당 프로퍼티는 for... in 문이나 Object.keys 등으로 열거할 수 없다.
// lastName 프로퍼티는 [[Enumerable]]의 값이 false이므로 열거되지 않는다.
console.log(Object.keys(person)); // ["firstName"] 

// [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없다. 
// lastName 프로퍼티는 [[Wri table]]의 값이 false이므로 값을 변경할 수 없다.
// 이때 값을 변경하면 에러는 발생하지 않고 무시된다.
person.lastName = 'Kim' ; 

// [[configurable]]의 값이 false인 경우 해당 프로퍼티를 삭제할 수 없다． 
// lastName 프로퍼티는 [[Configurable]]의 값이 false이드토 삭제할 수 없다. 
// 이때 프로퍼티를 삭제하면 에러는 발생하지 않고 무시된다.
delete person.lastName; 

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 재정의할 수 없다.
// Object.defineProperty(person, 'lastName', {enumerable: true}); 
// Uncaught TypeError: Cannot redefine property: lastName 

descriptor = Object.getOwnPropertyDescriptor(person, 'lastName'); 
console.log( 'lastName', descriptor); 
// lastName {value: "Lee", writable: false, enumerable: false, configurable: falsel}

// 접근자 프로퍼티 정의 
Object.defineProperty(person, 'fullName' , { 
// getter 함수 
	get() { 
	return '${this.firstName} ${this.lastName}';
	},
	// setter 함수 
	set(name) { 
		[this.firstName, this.lastName] = name.split(' ');
	},
	enumerable: true, 
	configurable: true 
});

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

person.fullName = 'Heegun Lee' ; 
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

• Object.defineProperty 메서드로 프로퍼티를 정의할 때 프로퍼티 디스크립터 객체의 프로퍼티를 일부 생략할 수 있다.
• 생략된 어트리뷰트는 다음과 같은 기본값이 적용된다. 

• Object.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의할 수 있다.
  • Object.defineProperties 메서드 사용

객체 변경 방지

• 객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다.
  • 프로퍼티를 추가하거나 삭제할 수 있다.
  • 프로퍼티 값을 갱신할 수 있다.
  • Object.defineProperty 또는 Object.defineProperties 메서드를 이용하여 프로퍼티 어트리뷰트를 재정의할 수도 있다.
• 객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다르다. 

✅객체 확장 금지

• Object. preventExtensions 메서드는 객체의 확장을 금지한다.
• 객체 확장 금지 == 프로퍼티 추가 금지
• 확장이 금지된 객체는 프로퍼티 추가가 금지된다. 
• 확장이 가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.

✅객체 밀봉

• Object.seal 메서드는 객체를 밀봉한다.
• 객체 밀봉(Seal) == 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지 
• 밀봉된 객체는 읽기와 쓰기만 가능하다.
• 밀봉된 객체인지 여부는 Object.seal 메서드로 확인할 수 있다.

✅객체 동결

• Object.freeze 메서드는 객체를 동결한다.
• 객체 동결(Freeze) == 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지
• 동결된 객체는 읽기만 가능하다.
• 동결된 객쳬인지 여부는 Object.isFrozen 메서드로 확인할 수 있다.

✅불변 객체

• 지금까지 살펴본 변경 방지 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다.
  • 따라서 Object.freeze 메서드로 객체를 동결해도 중첩 객체까지 동결할 수 없다. 
• 객체의 중첩 객체까지 동결해 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 개체를 값으로 가지는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.