[JS] 모던 자바스크립트 - 11. 프로퍼티 어트리뷰트

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

---

프로퍼티 어트리뷰트

- 프로퍼티의 상태를 나타내는 것

- 프로퍼티의 상태는 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)을 말한다

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

- 자바스크립트 엔진이 관리하는 내부슬롯이므로 직접 접근 불가능

 

프로퍼티 디스크립터 객체

- Object.getOwnPropertyDescriptor 메서드, Object.getOwnPropertyDescriptors 메서드로 간접적으로 프로퍼티 어트리뷰트를 확인 가능함

- 위 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환

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

const person = {
    name : 'Lee'
};

// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 1개를 반환
console.log(Object.getOwnPropertyDescriptor(person,'name'));

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

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 }
}
*/

 

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

---

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

- 데이터 프로퍼티와 접근자 프로퍼티와를 구분하는 방법은 Object.getOwnPropertyDescriptor 메서드를 사용해 반환한 프로퍼티 디스크립터 객체를 확인하여 구분

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

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

 

데이터 프로퍼티

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

- 프로퍼티 생성 시 [[Value]] 값은 프로퍼티 값으로 초기화, 나머지는 true로 초기화 

 

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

 

접근자 프로퍼티

- 자체적인 값을 갖지 않고, 접근자 함수로 구성된 프로퍼티

- 접근자 함수는 다른 데이터의 프로퍼티의 값을 읽거나 저장할 때 사용하는 함수

- getter/setter 함수라고도 부름

- 메서드 앞에 get/set을 붙여서 사용

 

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Get]]	get	- 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수
[[Set]]	set	- 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수
[[Enumerable]]	enumerable	데이터 프로퍼티의 [[Enumerable]]과 같음
[[Configurable]]	configurable	데이터 프로퍼티의 [[Configurable]]과 같음

 

const person = {
    // 데이터 프로퍼티
    fistName : 'Heywon',
    lastName : 'Lee'

    // 접근자 프로퍼티
    // getter 함수
    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
    // setter 함수
    set fullName(name) {
      [this.firstName, this.lastName] = name.split('');
    }
};

// 접근자 프로퍼티로 프로퍼티 값 저장
person.fullName = 'Hyewon Lee';
console.log(person); // {fistName: 'Hyewon', lastName: 'Lee'}

// 접근자 프로퍼티로 프로퍼티 값 참조
console.log(person.fullName); // Hyewon Lee

 

 

 

프로퍼티 정의

---

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

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

- Object.defineProperty 메서드로 프로퍼티 어트리뷰트 정의 가능

const person = {};

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

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

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

- 생략할 경우 기본값(value, get, set은 undefined / writable, enumerable, configurable은 false)으로 적용

- Object.defineProperties 메서드는 한번에 여러 개의 프로퍼티를 정의할 수 있음

const person = {};

Object.defineProperties(person, {
    // 데이터 프로퍼티 정의
    firstName: {
      value : 'Hyewon',
      writable : true,
      enumerable : true,
      configurable : true
    },
    lastName: {
      value : 'Lee',
      writable : true,
      enumerable : true,
      configurable : ture
    },
    // 접근자 프로퍼티 정의
    fullName : {
      // getter 함수
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      // setter 함수
      set(name) {
        [this.firstName, this.lastName] = name.split('');
      },
      enumerable : true,
      configurable : true
    }
});

 

객체 변경 금지

---

- 객체는 변경 가능한 값이므로 재할당 없이 직접 변경 가능

- 프로퍼티 추가 삭제 가능, 프로퍼티 값 갱신 가능, 프로퍼티 어트리뷰트 재정의 가능

- 이를 막기 위한 다양한 메서드가 있으며, 각각의 메서드는 객체의 변경을 금지하는 강도가 다름

 

Object.preventExtensions

- 객체 확장 금지

- 프로퍼티 추가 금지

- Object.defineProperty 메서드와 프로퍼티 동적 추가 방법 모두 금지

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

- 추가는 금지되지만 프로퍼티 삭제는 가능

- 확장 금지 객체에 프로퍼티를 추가하면 에러 없이 무시됨, strict mode에서는 에러

 

Object.seal 

- 객체 밀봉

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

- 읽기와 쓰기만 가능

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

- 프로퍼티 값 갱신은 가능 (writable : true)

- 밀봉 객체에 프로퍼티를 추가 혹은 삭제 시 에러 없이 무시됨, strict mode에서는 에러

- 프로퍼티 어트리뷰트 재정의 시 에러

 

Object.freeze

- 객체 동결

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

- 읽기만 가능 (writable : false, enumerable : true, configurable : false)

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

- 동결 객체에 프로퍼티 추가,삭제, 값 갱신 시 에러 없이 무시 됨, strict mode에서는 에러

- 프로퍼티 어트리뷰트 재정의 시 에러

 

불변 객체

- 위의 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못함

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

function deepFreeze(target) {
    // 객체가 아니거나 이미 동결된 객체는 무시, 객체이고 동결되지 않은 객체만 동결
    if (target && type of target === 'object' && !Object.isFrozen(target)) {
      Object.freeze(target);
      Object.keys(targert).forEach(key => deepFreeze(target[key]));
    }
    return target;
}

 

 

 

 

 

출처

- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리