[JavaScript] 10. Property Attribute

프로퍼티 어트리뷰트

프로퍼티 어트리뷰트란 프로퍼티 생성 시, 자바스크립트 엔진이 자동으로 정의하는 프로퍼티의 상태를 나타내는 속성입니다.

프로퍼티 어트리뷰트는 데이터 프로퍼티와 접근자 프로퍼티 각각에 대한 상태를 가집니다.

데이터 프로퍼티의 어트리뷰트

데이터 프로퍼티는 키, 값으로 구성된 프로퍼티입니다.

데이터 프로퍼티는 아래와 같은 어트리뷰트를 가집니다.

Attribute	Description
[[Value]]	프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값 기본값은 undefined
[[Writable]]	프로퍼티 값의 변경 가능 여부를 나타내는 불린 타입 값 기본값은 true
[[Enumerable]]	프로퍼티의 열거 가능 여부를 나타내는 불린 타입 값 기본값은 true
[[Configurable]]	프로퍼티 재정의 가능 여부를 나타내는 불린 타입 값 기본값은 true

접근자 프로퍼티의 어트리뷰트

접근자 어트리뷰트는 데이터를 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티입니다.

접근자 프로퍼티는 아래와 같은 어트리뷰트를 가집니다.

Attribute	Description
[[Get]]	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수 기본값은 undefined
[[Set]]	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수 기본값은 undefined
[[Enumerable]]	프로퍼티의 열거 가능 여부를 나타내는 불린 타입 값 기본값은 true
[[Configurable]]	프로퍼티 재정의 가능 여부를 나타내는 불린 타입 값 기본값은 true

Property Descriptor

Property Descriptor는 프로퍼티 어트리뷰트의 정보를 가지고 있는 객체입니다.

아래 메서드를 호출하여 확인이 가능합니다.

Synopsys: getOwnPropertyDescriptor>

Object.getOwnPropertyDescriptor(object, property key);

//return
1. Property Descriptor 객체

2. undefined // 존재하지 않거나 상속받은 프로퍼티에 접근하는 경우

Synopsys: getOwnPropertyDescriptors>

Object.getOwnPropertyDescriptor(object);

//return
Property Descriptor 객체들

아래는 데이터 프로퍼티의 프로퍼티 디스크립터를 호출하는 예제입니다.

code>

const person = {
  name: 'Hyeonsik',
  age: 30,
}
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
console.log(Object.getOwnPropertyDescriptors(person));

result>

{
  {
  value: 'Hyeonsik',
  writable: true,
  enumerable: true,
  configurable: true
}
{
  name: {
    value: 'Hyeonsik',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: true,
    enumerable: true,
    configurable: true
  }
}

아래는 식별자 프로퍼티의 프로퍼티 디스크립터를 호출하는 예제입니다.

code>

const person = {
  firstName: 'Hyeonsik',
  lastName: 'Bae',
  get fullName() {
    return (`${firstName} ${lastName}`);
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split('');
  }
}
console.log(Object.getOwnPropertyDescriptor(person, 'fullName'));
console.log(Object.getOwnPropertyDescriptors(person));

result>

{
  get: ƒ get fullName(),
  set: ƒ set fullName(),
  enumerable: true,
  configurable: true
}
{
  firstName: {
    value: 'Hyeonsik',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Bae',
    writable: true,
    enumerable: true,
    configurable: true
  },
  fullName: {
    get: ƒ get fullName(),
    set: ƒ set fullName(),
    enumerable: true,
    configurable: true
  }
}

프로퍼티 정의

새로운 프로퍼티를 추가할 때나, 기존 프로퍼티에 프로퍼티 어트리뷰트 재정의가 가능합니다.

아래 메서드를 호출하여 재정의가 가능합니다.

Synopsys: defineProperty>

Object.getOwnPropertyDescriptor(object, property key, {key: value, ...});

Synopsys: defineProperties>

Object.getOwnPropertyDescriptor(object, {property: {key: value, ...}, ...);

아래는 프로퍼티 재정의 예제입니다.

const person = {
  name: 'Hyeonsik',
}

Object.defineProperty(person, 'name', {
  value: 'nick',
  writable: true,
  enumerable: true,
  configurable: true,
});

Object.defineProperty(person, 'age', {
  value: 30,
  writable: true,
  enumerable: false,
  configurable: true,
});

Object.defineProperties(person, {
  name: {
    value: 'hyeonsik',
  },
  age: {
    writable: false,
  }
});

객체 변경 방지

객체는 Primitive type과 다르게 재할당 없이 변경이 가능합니다.

프로퍼티 추가, 삭제, 갱신이 자유롭고 프로퍼티 어트리뷰트 재정의도 가능합니다.

객체의 변경에 제한을 두기 위해 아래와 같은 메서드들이 제공됩니다.

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