[JavaScript] : 프로퍼티 어트리뷰

✍ 정의

자바스크립트 엔진은 프로퍼티를 생성할 때, 그것의 상태를 나타내며 내부 상태 값인 내부 슬롯으로써 프로퍼티 어트리뷰트(Property Attribute)를 기본 값으로 자동 정의한다.

그렇기에, 직접 접근할 수 있는 것 같지만 아쉽게도 직접적인 접근은 어렵지만 getOwnPropertyDescriptor 같은 메서드를 이용해서 내부 슬롯은 확인해 볼 수 있다.

const myIntroduction = {
  name : 'SEAN',
  age : '31',
  nickName : 'MukBo',
  favoriteMovie : 'Forrest Gump'
}

Object.getOwnPropertyDescriptor(myIntroduction,'favoriteMovie')
/*
{
  value: 'Forrest Gump',
  writable: true,
  enumerable: true,
  configurable: true
}
저 메서드를 복수 형태로 쓰면 모든 키 값에 대한 내부 슬롯을 볼 수 있다. 
*/
Object.getOwnPropertyDescriptors(myIntroduction)
/*
{
  name: {value: 'SEAN',writable: true,enumerable: true,configurable: true},
  age: {value: '31',writable: true,enumerable: true,configurable: true},
  nickName: {value: 'MukBo',writable: true,enumerable: true,configurable: true},
  favoriteMovie: {value: 'Forrest Gump',writable: true,enumerable: true,configurable: true}
}
*/

상기 주석 처리한 부분들들은 프로퍼티 어트리뷰트 분류 중 하나인 데이터 프로퍼티로 키와 값으로 구성되어 있다.

📝 데이터 프로퍼티

• Value : 키를 통해 접근 가능한 값
• Writable : 프로퍼티 값의 변경 가능 여부
• Enumerable : 프로퍼티의 열거 기능 여부
• Configurable : 프로퍼티의 재정의 가능 여부

→ 데이터 프로퍼티가 실제로 우리가 자주 접근하는 프로퍼티 중 하나이다.

그 다음으로는 접근자 프로퍼티가 존재하는데

📝 접근자 프로퍼티

• Get : 데이터 프로퍼티 값을 읽을 때 호출되는 접근자 함수
• Set : 데이터 프로퍼티 값을 저장할 때 호출 되는 접근자 함수
• Enumerable / Configurable : 데이터 프로퍼티와 동일 하다.

✍ 객체 변경 방지

위에서 프로퍼티 예제를 살펴보았다시피 여러가지 프로퍼티 어트리뷰트가 존재하고 이걸 특정 상황에 맞게 특정 메서드 (Object.defineProperty/Properties)를 적용하여 변경이 가능하다.

그렇기에 변경 점에 제한을 걸어 줄 수 있는 방법 또한 존재하며 다음과 같다.

📝 객체 확장 금지

• 프로퍼티 추가 금지
• 방법 : Object.preventExtensions(Object_name)

const myClass = {
	classNumber : 1,
	firstStudent : 'OH',
	secondStudent : 'Park',
}

Object.preventExtensions(myClass)

myClass.thirdStudent = 'Lee' // not working

📝 객체 밀봉

• 프로퍼티 추가 금지
• 프로퍼티 삭제 금지
• 프로퍼티 어트리뷰트 재정의 금지
• 방법 : Object.seal(Object_name)

const myClass = {
	classNumber : 1,
	firstStudent : 'OH',
	secondStudent : 'Park',
}

Object.seal(myClass)

myClass.thirdStudent = 'Lee' //

📝 객체 동결

• 읽기만 가능
• 자바스크립트 내에는 자바에 있는 서로 연관된 상수들의 집합 ENUM이 없기에 종종 객체 동결 효과를 적용해서 쓰기도 한다.
• 방법 : Objet.freeze(Object_name)

const myClass = {
	classNumber : 1,
	firstStudent : 'OH',
	secondStudent : 'Park',
}

Object.freeze(myClass)

위에서 알아보았듯, 객체에 프로퍼티 어트리뷰트를 활용해서 다양한 방식으로 변환이 가능하다.