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

프로퍼티 어트리뷰트

자바스크립트는 모든 객체(프로퍼티)를 생성할 때 Prototype이라는 내부 슬롯을 갖는다. 이때 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.

프로퍼티의 상태

• 값(value)
• 갱신여부 가능(writable)
• 열거 가능 여부(enumerable)
• 재정의 가능 여부(configurable)

예제

const person = {
	name : "Lee"
};

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

// 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다. 
console.log(Object.getOwnPropertyDescriptors(person));

// 출력
{
  name : {value: "Lee", writable : true, enumerable: true, configurable : true},
  age : {value: "Lee", writable : true, enumerable: true, configurable : true}
}

---

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

데이터 프로퍼티

데이터 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다.

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티
[[Value]]	value
[[Writable]]	writable
[[Enumerable]]	enmurable
[[Configurable]]	configurable

접근자 프로퍼티

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

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티
[[Get]]	get
[[Set]]	set
[[Enumerable]]	enmurable
[[Configurable]]	configurable

예제

const person = {
	// 데이터 프로퍼티
  	firstName : 'Junseung',
  	lastName : 'Hwang'

// fullName은 접근자 함수로 구성된 접근자 프로퍼티다. 
// getter 함수
  get fullName(){
      return `${this.firstName} ${this.lastName}`
  }

// setter 함수
  set fullName(name){
      [this.firstName, this.lastName] = name.split(" ");
  }
};

---

객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신할 수 있으며, object.defineProperty를 통해 프로퍼티 어트리뷰트를 재정의 할 수도 있다.

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

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

객체 확장 금지(Object.preventExtensions)

• 확장이 금지된 객체는 프로퍼티 추가가 금지된다.

예제

const person = { name : 'Hwang' }

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

// 프로퍼티 추가는 금지되지만 삭제는 가능하다. 
delete person.name
console.log(person) // 출력 {}

객체 밀봉 (Object.seal)

Object.seal 메서드는 객체를 밀봉한다. 객체 밀봉이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트재정의 금지를 의미한다. 즉, 밀봉된 객체는 읽기와 쓰기만 가능하다.

const person = { name : 'Hwang' }

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

// 프로퍼티 추가는 금지되지만 삭제는 가능하다. 
delete person.name // 무시. strict mode에서는 에러
console.log(person) // 출력 { name : 'Hwang' }

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

객체 동결 (Object.freeze)

Object.freeze 메서드는 객체를 동결한다. 객체 동결이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다. 즉, 동결된 객체는 읽기만 가능하다.

이때 변경 방지 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다.

const person = { name : 'Hwang' }

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

// 프로퍼티 추가는 금지되지만 삭제는 가능하다. 
delete person.name // 무시. strict mode에서는 에러
console.log(person) // 출력 { name : 'Hwang' }

// 프로퍼티 값 갱신은 가능하다. 
person.name = "Kim"; // 무시. strict mode에서는 에러
console.log(person) // 출력 { name : 'Hwang' }