[js] Property Attribute

Internal Slot, Internal Method

- 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.

- 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다. [[]]

- ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님.

- 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가진다. 

   - 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 원칙적으로 접근할 수 없지만, __proto__를 통해 간접적으로 접근할 수 있다.

Property Attribute, Property Descriptor 

- js엔진은 프로퍼티를 생성할 때, 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.

   - 프로퍼티 상태 : 프로퍼티의 값, 값의 갱신 여부, 열거 가능 여부, 재정의 가능여부를 말함.

- 프로퍼티 어트리뷰트는 js엔진이 관리하는 내부 상태 값인 내부 슬롯이다. 

   - [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]

   - 직접 접근은 할 수 없지만 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}
}
*/

 

Data Property, Accessor Property

- 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티

   - 데이터 프로퍼티는 프로퍼티 어트리뷰트들을 가짐.

   - [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]

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

   - [[Get]], [[Set]], [[Enumerable]], [[Configurable]]

 

const person = {
	firstName: 'Ungmo',
    lastName: 'Lee',
    
    //getter 함수
    get fullName() {
    	return `${this.firstName} ${this.lastName}`;
    }
    //setter 함수
    set fullName(name) {
    	//배열 디스트럭처링 할당
    	[this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(person.firstName + ' ' + person.lastName);

person.fullName = 'Heegun Lee';
console.log(person);

console.log(person.fullName);

- person객체의 firstName과 lastName 프로퍼티 -> 데이터 프로퍼티

- get, set 함수 이름 fullName -> 접근자 프로퍼티

 

- 접근자 프로퍼티 fullName으로 프로토타 값에 접근하면, 내부적으로 [[Get]]이 호출됨.

- 프로토타입 체인에서 프로퍼티를 검색해서 person 객체에서 fullName프로퍼티가 존재함을 확인.

프로토타입
- 어떤 객체의 상위 객체의 역할을 하는 객체
- 하위(자식) 객체에게 자신의 프로퍼티와 메서드를 상속

프로토타입 체인
- 프로토타입이 단방향 링크드리스트형태로 연결되어 있는 상속 구조를 말함.
- 객체의 프로퍼티나 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티나 메서드가 없다면 프로토타입 체인을 따라 프로토타입의 프로토타입나 메서드를 차례대로 검색함.

 

프로퍼티 정의

- Object.defineProperty 메서드를 사용해서 프로퍼티의 어트리뷰트를 정의할 수 있음.

- 여러 개는 Object.defineProperties 메서드를 사용

 

객체 변경 방지 메소드

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

 

- 객체 확장 금지 : 프로퍼티 추가 금지

- 객체 밀봉 : 읽기와 쓰기만 가능

- 객체 동결 : 읽기만 가능