16. 프로퍼티 어트리뷰트

1. 내부 슬롯과 내부 메서드

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

- ECMAScript 사양에 등장하는 이중 대괄호 [[..]] 로 감싼 이름들이 내부 슬롯과 내부 메서드이다.

- 내부 슬롯과 내부 메서드는 실제로 동작하지만 개발자가 직접 접근하도록 외부로 공개된 객체의 프로퍼티는 아니다.

- 일부만 간접적으로 수단을 제공한다(ex. [[Prototype]] => __proto__ )

 

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

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

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

- 프로퍼티 어트리뷰트에 직접 접근할 수는 없지만 Object.getOwnPropertyDescriptor메서드를 이용해 간접적으로 확인할 수 있다.

- 이 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터(Property Descriptor)객체를 반환한다..

- 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 디스크립터를 요구하면 undefined가 반환된다.

 

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

- 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다

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

  3.1 데이터 프로퍼티

  - 데이터 프로퍼티의 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[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]]을 flase로 변경하는 것은 허용된다.

 

  3.2 접근자 프로퍼티(Accessor property)

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

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Get]]	get	- 접근자 프로퍼티를 통해 프로퍼티의 값을 읽을 때 호출되는 접근자 함수이다. 즉, 접근자 프로퍼티 키롤 프로퍼티 값에 접근하면 프로퍼티 어트리뷰트 [[GET]]의 값, 즉 getter함수가 호출되고 그 결과가 프로퍼티 값으로 반환된다.
[[Set]]	set	- 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수이다. - 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 프로퍼티 어트리뷰트 [[Set]]의 값, 즉 setter함수가 호출되고, 그 결과가 프로퍼티 값으로 저장된다.
[[Enumerable]]	enumerable	- 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는다. - [[Enumerable]]의 값이 false인 경우 해당 프로퍼티는 for ...in문이나 Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	configurable	- 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 갖는다. - [[Configurable]]의 값이 false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어티르뷰트 값의 변경이 금지된다. 단, [[Writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 flase로 변경하는 것은 허용된다.

  - 메서드 앞에 get set이 붙은 메서드가 getter와 setter함수이고, 접근자 프로퍼티의 [[Set]], [[Get]]으ㅢ 내부 로직을 실행시킨다.

  * 프로토타입(Prototype)

    => 프로토타입은 어떤 객체의 상위(부모) 역할을 하는 객체이다.

    => 프로토타입은 하위(자식) 객체에게 자신의 프로퍼티와 메서드를 상속한다.

    => 프로토타입 체인은 프로토타입이 단방향 링크드 리스트로 연결되어 있는 상속 구조를 말한다.

    => 객체의 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티나 메서드가 없다면, 프로토타입 체인을 따라 프로토타입의 프로퍼티나 메서드를 차례대로 검색한다.

 

4. 프로퍼티 정의

- 프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다.

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

const person = {};

Object.definePorperty(person, 'firstName'. {
	value:'Ungmo',
    writable: true,
    enumerable: true,
    configurable: true
 }); //기본적으로 디스ㅡ립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.

  - Objet.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의할 수 있다.

  - Object.defineProperties메서드를 이용하면 여러개의 프로퍼티를 한번에 정의할 수 있다.

 

5. 객체 변경 방지

  5.1 객체 확장 금지

  - Object.preventExtensions메서드를 이용하면 객체의 프로퍼티 추가가 금지된다.

  - 확장가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.

 

  5.2 객체 밀봉

  - Object.seal메서드는 객체를 밀봉한다. 

  - 객체 밀봉이란, 프로퍼티 추가, 삭제와 프로퍼티 어트리뷰트 재정의를 금지한다. 

  - 오직 읽기와 쓰기만 가능하다.

  - 밀봉된 객체인지의 여부는 Object.isSealed로 확인할 수 있다.

 

  5.3 객체 동결

  - Object.freeze메서드는 객체를 동결한다. 

  - 객체 동결이란, 프로퍼티 추가/삭제와 프로퍼티 어트리뷰트의 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다.

  - 동결된 객체는 읽기만 가능하다.

  - 동결된 객체인지 여부는 Object.isFrozen메서드로 확인할 수 있다.

 

  5.4 불변 객체

  - Object.freeze메서드로 객체를 동결해도 중첩객체까지 동결할 수는 없다.

  - 깊은 동결을 하기 위해서는 재귀함수를 이용해 모든 객체를 freeze 걸어줘야 한다.

function deepFreeze(targer){
	
    if(target && typeof target === 'object' && !Object.isFrozen(target)){
    	Object.freeze(target);
        
        Object.keys(target).forEach(key => deepFreeze(target[key]));
    }
    return target;
}