[JavaScript_DeepDive] 16. 프로퍼티 어트리뷰트

#내부 슬롯과 내부 메서드

-내부 슬롯과 내부 메서드는 js엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다. ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다.

-내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 js엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. (일부만 제공하고 나머지는 직접적으로 접근 불가능)

const o = {};

//내부 슬롯은 js엔진의 내부 로직이므로 직접 접근할 수 없다.
o[[Prototype]]	//->Uncaught SyntaxError: Unexpeted token'['
//단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다
o.__proto__//->Object.prototype

 

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

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

-프로퍼티의 상태 : 프로퍼티의 값(value), 값의 갱신 가능 여부(wirtable), 열거 가능 여부(enumarable), 재정의 가능 여부(configurable)

-프로퍼티 어트리뷰트는 js엔진이 관리하는 내부 상태 값(meta-property)인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다. 접근은 불가능하지만 Object getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다.

const person={
	name:'Lee'
};

//프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
console.log(Object.getOwnPropertyDescriptor(person,'name');
//{value: "Lee", writable: true, enumerable: true, configurable: true}

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

-Object.getOwnPropertyDescriptor메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터(Property Discriptor)객체를 반환한다(없으면 undefined반환)

-ES8이전에는 하나의 프로퍼티 디스크립터 객체를 반환하지만 이후에는 모든 객체들을 반환함.

 

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

※데이터 프로퍼티(data property)

: 키와 값으로 구성된 일반적인 프로퍼티. 지금까지 살펴본 모든 프로퍼티의 형태

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

 

※접근자 프로퍼티(accessor property)

: 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수(accessor function)로 구성된 프로퍼티. 접근자 함수는 getter/setter 함수라고도 부른다. 둘다 정의할 수도 있고 하나만 정의할 수도 있다. 읽거나 저장할때 관여함

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

const person = {
	//데이터 프로퍼티
    firstName: 'Ungmo',
    secondName: 'Lee'
    
    //fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
    //getter 함수
    get fullName(){
    	return `${this.FirstName} ${this.lastName}`;
    },
    //setter 함수
    set fullName(name){
    	[this.firstName, this.lastName] = name.split(' ');
    }
};

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

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

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

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

//fullName은 접근자 프로퍼티다
//접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]
descrptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
//{get: f, set: f, enumerable: true, configurable: true}

-person 객체의 firstName과 lastName프로퍼티는 일반적인 데이터 프로퍼티다. 메서드 앞에 get, set이 붙은 메서드가 있는데 이것들이 바로 getter, setter함수이고, 함수이름 fullName이 접근자 프로퍼티다. 

-이를 내부 슬롯/메서드 관점에서 설명하면 접근자 프로퍼티 fullName으로 프로퍼티 값에 접근함녀 내부적으로 [[Get]] 내부 메서드가 호출되어 다음과 같이 동작한다.

1. 프로퍼티 키가 유효한지 확인한다. 프로퍼티 키는 문자열 또는 심벌이어야 한다. 프로퍼티 키 "fullName"은 문자열이므로 유효한 프로퍼티 키다.

2. 프로토타입 체인에서 프로퍼티를 검색한다. person객체에 fullName프로퍼티가 존재한다.

3. 검색된 fullName프로퍼티가 데이터 프로퍼티인지 접근자 프로퍼티인지 확인한다. fullName 프로퍼티는 접근자 프로퍼티다. 

4. 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수를 호출하여 그 결과를 반환한다. 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값은 Object.getOwnPropertyDescriptor 메서드가 반환하는 프로퍼티 디스크립터(PropertyDescriptor)객체의 get프로퍼티 값과 같다.

 

@프로토타입(prototype)

프로토타입은 어떤 객체의 상위(부모)객체의 역할을 하는 객체다. 프로토타입은 하위(자식)객체에게 자신의 프로퍼티와 메서드를 상속한다. 프로토타입 객체의 프로퍼티나 메서드를 상속받은 하위 객체는 자신의 프로퍼티 또는 메서드인 것처럼 자유롭게 사용할 수 있다. 

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

 

-프로퍼티와 데이터 프로퍼티를 구별하는 방법

//일반 객체의  __proto__는 접근자 프로퍼티다.
Object.getOwnPropertyDescriptor(Object.prototype, '__prooto__');
//{get: f, set: f, enumerable: false, configurable: true}

//함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function(){}, 'prototype');
//{value: {...}, writable: true, enumerable: false, configurable: false}

 

#프로퍼티 정의

-새로운 프로퍼티의 어트리뷰트를 명시적으로 정의, 기존에 있으면 재정의 하는 것

-Object.defineProperty메서드를 사용해서 정의 가능(인수 : 객체의 참조, 문자열, 디스크립터 객체)

const person = {};

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

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

let descriptor = Object.getOwnPropertyDescriptor(person, firstName');
console.log('firstName', descriptor);
//firstName {value: "Ungmo", writable: 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픞로퍼티는 [[Writable]]의 값이 false이므로 값을 변경할 수 없다.
//이때 값을 변경하려면 에러는 발생하지 않고 무시된다.
person.lastName = 'Kim';

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

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

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

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

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

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

-Object.defineProperty메서드로 프로퍼티를 정의할 때 일부를 생략하면 기본값이 적용된다.

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

-Object.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의할 수 있지만 Object.defineProperties메서드를 사용하면 여러개의 프로퍼티를 한번에 정의할 수 있다. 

 

#객체 변경 방지

-객체는 변경 간능한 값이므로 재할당 없이 직접 변경할 수 있다. Object.defineProperty / Properties메서드를 사용하여 프로퍼티 어트리뷰트를 재정의 할 수 있다.

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

※객체 확장금지

:확장이 금지된 객체는 프로퍼티 추가가 금지되지만 삭제는 가능하다..(프로퍼티 동적 추가, Object.defineProperty 사용금지) / Object.isExtensible메서드로 확장 여부 확인 가능

 

※객체 밀봉

:밀봉된 객체는 읽기 쓰기만 가능하다. / Object.isSealed 메서드로 밀봉 여부 확인 가능

 

※객체 동결

: 동결된 객체는 읽기만 가능하다 / Object.isFrozen메서드로 동결 여부 확인 가능

 

※불변 객체

위 3가지 변경 방지 메서드들은 얕은 변경방지(shallow only)로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다. 따라서 Object.freeze메서드로 객체를 동결하여도 중첩 객체까지 동결할 수는 없다.

const person = {
	name: 'Lee',
    address: {city: 'Seoul'}
};

//얕은 객체 동결
Object.freeze(person);

//직속 프로퍼티만 동결한다
console.log(Object.isFrozen(person));	//true
//중첩 객체까지 동결하지 못한다
console.log(Object.isFrozen(person.address));	//false

person.address.coty = 'Busan';
console.log(person);	//{name: "Lee", address: {city: "Busan"}}

-객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze메서드를 호출해야 한다.