[Javascript] 프로퍼티 어트리뷰트

1. 프로퍼티 어트리뷰트

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

1.1. 데이터 프로퍼티

데이터 프로퍼티는 키와 값으로 구성된 일반적인 프로퍼티로 value, writable, enumerable, configurable의 프로퍼티 어트리뷰트를 가진다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다.

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

const person = {
  name: 'Lee'
};

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

1.2. 접근자 프로퍼티

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

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Get]]	get	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수다.
[[Set]]	set	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수다.
[[Enumerable]]	enumerable	[[Enumerable]]의 값이 false인 경우 해당 프로퍼티는 for... in 문이나 Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	configurable	[[Configurable]]의 값이 false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값의 변경이 금지된다. 단, [[Writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용된다.

const person = {
  firstName: 'Ungmo',
  lastName: 'Lee',

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  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은 데이터 프로퍼티다.
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log(descriptor);
// {value: "Heegun", writable: true, enumerable: true, configurable: true}

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

1.3. 프로퍼티 관련 메서드

• Object.defineProperty 메서드는 프로퍼티의 어트리뷰트를 정의할 수 있다.
• Obejct.preventExtensions 메서드는 객체의 확장을 금지 할 수 있다. 확장이 금지된 객체는 프로퍼티 추가가 금지된다.
• Object.seal 메서드는 객체를 밀봉할 수 있다. 밀봉된 객체는 읽기와 쓰기만 가능하다.
• Object.isSealed 메서드로 밀봉된 객체인지 확인할 수 있다.
• Object.freeze 메서드는 객체를 동결한다. 동결된 객체는 읽기만 가능하다. 하지만 중첩 객체까지 동결이 되는건 아니기 때문에 객체를 값으로 갖는 모든 프로퍼티에 Object.freeze를 걸어줘야 한다.
• Object.isFrozen 메서드로 동결된 객체인지 확인할 수 있다.

 

 

 

참고: 모던 자바스크립트 Deep Dive