[Deep dive] 16장 프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드 

 

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

- 자바스크립트 엔진의 내부로직이므로 개발자가 직접 접근 불가 

- 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단 제공

 ex)

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

- [[Prototype]]은 __proto__를 통해 간접적으로 접근 가능 

const o = {};
0.__proto__ //object.prototype

 

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

 

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

 

프로퍼티 어트리뷰트

 

- 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]

- Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인 가능

 

Object.getOwnPropertyDescriptor 메서드

 

- 첫번째 매개변수로 객체 참조 전달

- 두번째 매개변수로 프로퍼티 키를 문자열로 전달 

- 프로퍼티 디스크립터(PropertyDescriptor)객체 반환

 

프로피터 디스크립터 

 

- 프로퍼티 어트리뷰트 정보 제공

const person = {
  name : 'Lee'
};

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

//프로퍼티 동적 생성
person.age = 20;

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

 

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

 

- 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분

 

 

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

 

프로퍼티  어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Value]]	value	- 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값
[[Writable]]	writable	-프로퍼티 값의 변경 여부를 나타내며 불리언 값을 가짐 - false인 경우 읽기전용 프로퍼티
[[Enumerable]]	enumerable	-프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 가짐 - false인 경우 for..in문이나 Object.keys메서드로 열거 불가
[[Configurable]]	configurable	- 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 가짐  -false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값 변경 금지 - [[writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는것은 허용

 

- 프로퍼티가 생성될 떄 [[Value]]의 값은 프로퍼티 값으로 초기화

- [[Writable]]. [[Enumerable]],[[Configurable]]은 true로 초기화 

 

 

16.3.2 접근자 프로퍼티 

 

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

 

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

const person = {
  //데이터 프로퍼티
  firstName : 'Ungmo',
  lastName : 'Lee'.charAt
  
  //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); // {fristName : "Heegun", lastName: "Lee"}

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

//fristName은 데이터 프로퍼티
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log(descriptor);
//{value : "Heegun", writalbe: true, enumerable:true, configurable: true}

//fullName은 접근자 프로퍼티 
descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
//{get:f, set:f, enumeralbe:true, configurable:true}

 

16.4 프로퍼티 정의 

 

프로퍼티 정의 

 

- 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의

- 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것

- Object.defineProperty 메서드를 사용하여 프로퍼티 어트리뷰트 정의 가능

 

Object.defineProperty 메서드

 

- 인수로 1) 객체의 참조 2) 데이터 프로퍼티의 키인 문자열 3) 프로퍼티 디스크립터 객체 전달

 

Object.defineProperties 메서드 

 

- 여러 개의 프로퍼티를 한 번에 정의 가능 

 

const person = {};

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

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

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: 'Ungmo',writable: false,enumerable: false,configurable: false}

//lastName 프로퍼티는 [[Enumerable]]의 값이 false이므로 열거되지 않음
console.log(Object.keys(person));
//[ 'firstName' ]

//lastName 프로퍼티는 [[Writable]]의 값이 false이므로 해당 프로퍼티 [[Value]]의 값 변경 불가 
//이때 값을 변경하면 에러는 발생하지 않고 무시됨
person.lastName = 'Kim';

//lastName 프로퍼티는 [[Configurable]]의 값이 false이므로 해당 프로퍼티를 삭제 불가
//이때 값을 변경하면 에러는 발생하지 않고 무시됨 
delete person.lastName;

//접근자 프로퍼티 정의 
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);
//fullName {get: [Function: get],set: [Function: set],enumerable: true,configurable: true}

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

 

16.5 객체 변경 방지 

 

- 자바스크립트는 객체의 변경을 방지하는 다양한 메서드 제공

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

 

 

16.5.1 객체 확장 금지 

 

- 확장이 금지된 객체는 프로퍼티 추가가 금지됨

- Object.preventExtensions 메서드 사용

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

const person = {name : 'Lee'};

//person 객체는 확장이 금지된 객체가 아니다.
console.log(Object.isExtensible(person)); //true

//person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다.
Object.preventExtensions(person);

//person 객체는 확장이 금지된 객체.
console.log(Object.isExtensible(person)); //false

//프로퍼티 추가가 금지됨
person.age = 20; //무시됨
console.log(person); // {name : "Lee"}

//프로퍼티 삭제는 가능 
delete person.name;
console.log(person); //{}

//프로퍼티 정의에 의한 프로퍼티 추가도 금지 
Object.defineProperty(person, 'age', {value:20});
//typeerror

 

16.5.2 객체 밀봉

 

- 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 정의 금지를 의미 

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

- Object.seal 메서드로 밀봉 가능

- 밀봉된 객체인지 여부는 Object.isSealed 메서드로 확인 가능

 

const person = {name: 'Lee'};

//person 객체는 밀봉된 객체가 아니다.
console.log(Object.isSealed(person)); //false

//person 객체를 밀봉하여 프로퍼티 추가, 삭제, 재정의를 금지 
Object.seal(person);

//person 객체는 밀봉된 객체
console.log(Object.isSealed(person)); //true

//밀봉된 객체는 configurable이 false이다.
console.log(Object.getOwnPropertyDescriptors(person));
// name: {value: 'Lee',writable: true,enumerable: true,configurable: false}

//프로퍼티 추가가 금지
person.age = 20; //무시 
console.log(person); // {name: "Lee"}

//프로퍼티 삭제가 금지 
delete person.name; //무시 
console.log(person); // {name: "Lee"}

//프로퍼티 값 갱신은 가능
person.name = 'Kim';
console.log(person); // {name:"Kim"}

//프로퍼티 어트리뷰트 재정의가 금지 
Object.defineProperty(person, 'name', {configurable:true});
//typeerror

 

16.5.3 객체 동결

 

- 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미 

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

- object.freeze 메서드를 이용하여 동결 가능

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

 

const person = {name: "Lee"};

//person 객체는 동결된 객체가 아니다.
console.log(Object.isFrozen(person)); //false

//person 객체를 동결하여 프로퍼티 추가, 삭제, 재정의,쓰기를 금지
Object.freeze(person);

//person 객체는 동결된 객체이다.
console.log(Object.isFrozen(person)); //true

//동결된 객체는 wirtable과 configurable이 false이다.
console.log(Object.getOwnPropertyDescriptors(person));
//name: {value: 'Lee',writable: false,enumerable: true,configurable: false}

//프로퍼티 추가가 금지
person.age = 20; //무시 
console.log(person); //{name:"Lee"}

//프로퍼티 삭제가 금지 
delete person.name; //무시
console.log(person);//{name:"Lee"}

//프로퍼티 값 갱신이 금지 
person.name ='Kim'; //무시
console.log(person); //{name:"Lee"}

//프로퍼티 어트리뷰트 재정의가 금지 
Object.defineProperty(person, 'name', {configurable:true});
//typeerror

 

16.5.4 불변 격체 

 

- Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수는 없음 (얇은 변경 방지 shallow only)

- 읽기전용의 불변객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출

function deepFreeze(target) {
  //객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결
  if(target && typeof target === 'object' && !Object.isFrozen(target)) {
    Object.freeze(target);
    
    //모든 프로퍼티를 순회하며 재귀적으로 동결
    Object.keys(target).forEach(key => deepFreeze(target[key]));
  }
  return target;
}

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

//깊은 객체 동결
deepFreeze(person);

console.log(Object.isFrozen(person)); //true
//중첩 객체까지 동결
console.log(Object.isFrozen(person.address)); //true

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