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

---

  16.1 내부 슬롯과 내부 메서드  

- 내부 슬롯/내부 메서드 : 자바스크립트 엔진 구현 알고리즘을 설명하기 위한 ECMAScript 사양에서 사용하는 의사 프로퍼티 / 의사 메서드.

- 이중 대괄호 ([[ ... ]])로 감싼 이름들이다.

- 자바스크립트 엔진의 내부 로직이므로 직접 접근하거나 호출할 수 있는 방법은 제공하지 않음. 일부에 한하여 접근할 수 있는 수단 제공.

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

- 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 기본값으로 자동 정의함.

  * 프로퍼티 상태 : 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부

 

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

→ 첫 번째 매개변수에는 객체의 참조 전달. 두 번째 매개변수에는 프로퍼티 키를 문자열로 전달.

→ 프로퍼티 디스크립터 객체를 반환

- ES8에서는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체 반환

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

● 데이터 프로퍼티

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

● 접근자 프로퍼티

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

  16.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]]을 false로 변경하는 것은 허용.

 

  16.3.2 접근자 프로퍼티  

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

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

- 접근자 함수는 getter/setter 함수라고도 부른다.

- 접근자 프로퍼티는 getter와 setter 함수를 모두 정의할 수도 있고 하나만 정의할 수도 있다.

// 예제 16-06
const person = {
    // 데이터 프로퍼티
    firstName: 'Ungmo', 
    lastName: 'Lee',
    
    // ful Name은 접근자 함수로 구성된 접근자 프로퍼티다.
    // getter 함수
    get fullName() {
        return `${this.firstName} ${this.lastName}`; 
    }, 
    // setter 함수
    set fullName(name) {
        // 배열 디스트럭처링 할당: "31.1 배열 디스트럭처링 할당" 참고 
        [this.firstName, this.lastName] = name.split(' '); 
    } 
};
// 데이터 프로퍼티를 통한 프로퍼티 값의 참조. 
console.log(person.firstName + ' ' + person.lastName); // Ungmo Lee Lee

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

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

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

// fullName은 접근자 프로퍼티다.
// 접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]
// 프로피티 어트리뷰트를 갖는다. 
descriptor = Object.getownPropertyDescriptor(person, 'fullName');
console.log(descriptor);// {get: f, set: f, enumerable: true, configurable: true}

접근자 프로퍼티 fullName으로 프로퍼티 값에 접근하면 내부적으로 [[Get]] 내부 메서드가 호출되어 다음과 같이 동작.

 

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

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

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

4. 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값 즉 getter 함수를 호출하여 그 결과를 반환한다.

프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값은 Object.getOwnPropertyDescriptor 메서드가 반환하는 프로퍼티 디스크립터 PropertyDescriplor 객체의 get 프로퍼티 값과 같다.

 

  프로토 타입  

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

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

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

  16.4 프로퍼티 정의  

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

- 이를 통해 객체의 프로퍼티가 어떻게 동작해야 하는지를 명확히 정의가능.

// 예제 16-08
const person = {}; 

// 데이터 프로퍼티 정의 
Object.defineProperty(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.define Property(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: false}

// 접근자 프로퍼티 정의 
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: f, set: f, enumerable: true, configurable: true}

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

 

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

- Object.defineProperty 메서드로 프로퍼티를 정의할 때 프로퍼티 디스크립터 객체의 프로퍼티를 일부 생략할 수 있다.

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

  16.5 객체 변경 방지  

- 객체는 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신할 수 있으며, 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

  16.5.1 객체 확장 금지  

- Object.preventExtensions 메서드는 객체의 확장을 금지한다. 프로퍼티 동적 추가와 Object.defineProperty 메서드 두 가지 추가 방법이 모두 금지된다.

// 예제 16-10
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; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}
    
// 프로퍼티 추가는 금지되지만 삭제는 가능하다.
delete person.name;console.log(person); // {}
    
// 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다. 
Object.defineProperty(person, 'age', { value: 20 }); 
// TypeError: Cannot define property age, object is not extensible

  16.5.2 객체 밀봉  

- Object.seal 메서드는 객체를 밀봉한다. 밀봉된 객체는 읽기와 쓰기만 가능하다.

// 예제 16-11
const person = { name: 'Lee' };
    
// person 객체는 밀봉(seal)된 객체가 아니다.
console.log(Object.isSealed(person)); // false
    
// person 객체를 밀봉(seal)하여 프로퍼티 추가, 삭제, 재정의를 금지한다.
Object.seal(person);
    
// person 객체는 밀봉(seal)된 객체다.
console.log(object.isSealed(person)); // true

// 밀봉(seal)된 객체는 configurable이 false다.
console.log(object.getOwnPropertyDescriptor(person));

/*
{
    name: {value: "Lee", writable: true, enumerable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러 
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다. 
delete person.name; // 무시. strict mode에서는 에러 
console.log(person); // {name: "Lee"}

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

// 프로퍼티 어트리뷰트 재정의가 금지된다. 
object.defineProperty(person, 'name', { configurable: true }); 
// TypeError: Cannot redefine property: name

  16.5.3 객체 동결  

- Object.freeze 메서드는 객체를 동결한다. 동결된 객체는 읽기만 가능하다.

// 예제 16-12
const person = { name: 'Lee' };

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

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

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

// 동결(freeze)된 객체는 writable과 configurablel false다.
console.log(Object.getOwnPropertyDescriptors(person));

/*
{
    name: {value: "Lee", writable: true, enumerable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러 
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다. 
delete person.name; // 무시. strict mode에서는 에러 
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신이 금지된다.  
person.name = 'Kim'; // 무시. strict mode에서는 에러 
console.log(person); // {name: "Lee"}

// 프로퍼티 어트리뷰트 재정의가 금지된다. 
object.defineProperty(person, 'name', { configurable: true }); 
// TypeError: Cannot redefine property: name

  16.5.4 불변 객체  

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

// 예제 16-13
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.city = 'Busan'; 
console.log(person); // {name: "Lee", address: {city : "Busan"}}

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

// 예제 16-14
function deepFreeze(target) {
    // 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다. 
    if (target && typeof target === 'object' && !Object.isFrozen(target)){
        Object.freeze(target);
        /*
        모든 프로퍼티를 순회하며 재귀적으로 동결한다. 
        Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다. 
        forEach 메서드는 배열을 순회하며 배열의 각 요소에 대하여 콜백 함수를 실행한다.
        */
        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"}}

---

* 위 내용은 모던 자바스크립트 Deep Dive를 참고하여 개인적인 공부를 목적으로 정리하였습니다.

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791158392239&orderClick=LEa&Kc=

모던 자바스크립트 Deep Dive - 교보문고