[🐱 자바스크립트] 프로퍼티 어트리뷰트

** 모던 자바스크립트 DeepDive 16장을 읽으며 정리한 글입니다.

프로퍼티 어트리뷰트는 자바스크립트의 객체 어트리뷰트에 관한 내용을 다룬다. 이는 간단하게 객체 생성시 객체가 갖는 기본적인 상태 및 속성이라고 생각하면 된다.

프로퍼티 어트리뷰트에 대해서 알기 위해서는 내부 슬롯과 내부 메서드에 대해 먼저 이해해야 한다. 간단히 대략적인 개념만 이해하고 넘어가면 된다.

16.1 내부 슬롯과 내부 메서드

---

• 내부 슬롯과 내부 메서드는 js 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.
  ( 쉽게 내부 로직을 작성하기 위해 만들어진 것이라고 생각하자. )

• 내부 슬롯은 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니며, 일부 내부 슬롯과 내부 메서드에 접근할 수 있는 수단을 제공한다.
  - ex. [[prototype]] 내부 슬롯의 경우 __proto__ 를 통해 간접 접근이 가능하다. o.proto

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

---

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

• 상태에는 프로퍼티의 값(value), 값의 갱신 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)가 있다.

• 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수 있다.
  - ex. console.log(Object.getOwnPropertyDescriptor(객체의 참조,’프로퍼티 키’);

  • {value: “Lee”, writable:true, enumerable:true, configurable:true}```

• 반환 : 프로퍼티 디스크립트 객체를 반환한다.
  (존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 디스크립트 객체를 요구시 undefined를 반환)

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

---

프로퍼티는 두 가지 종류가 있다. 데이터 프로퍼티와 접근자 프로퍼티이다.

• 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티이다. (대부분 데이터 프로퍼티에 해당한다. )

  프로퍼티 어트리뷰트	설명
  [[ Value ]]	프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. 값을 변경시 [[ value]]에 값을 재할당한다. 프로퍼티가 없는 경우 프로퍼티를 동적 생성하고 생성된 프로퍼티의 값을 [[ value ]]에 저장한다.
  [[ Writable ]]	프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 갖는다. 값이 false인 경우 값을 변경할 수 없는 읽기전용 프로퍼티가 된다.
  [[ Enumerable ]]	프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는다. 열거가 가능하다는 의미는 for-in 반복문이나 Object.keys() 등의 반복이 가능하다는 의미이다.
  [[ Configurable ]]	프로퍼티의 재정의 가능 여부를 나타내며 불리언값을 갖는다. false인 경우 해당 프로퍼티의 삭제 및 값의 변경이 금지된다.

프로퍼티 생성시 [[ Value ]] 의 값은 프로퍼티 값으로 초기화되며, 나머지 프로퍼티 어트리뷰트의 값은 true로 초기화된다.

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

  프로퍼티 어트리뷰트	설명
  [[ Get ]]	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수이다. 즉 [[ Get ]]의 값 getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환된다.
  [[ Set ]]	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수다. 마찬가지로 [[ Set ]]의 값 setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장된다.
  [[ Enumerable ]]	데이터 프로퍼티의 [[ Enumerable ]] 과 동일
  [[ Configurable ]]	데이터 프로퍼티의 [[ Configurable ]] 과 동일

const person = {
// 데이터 프로퍼티 
	firstName:'Ungmo',
	lastName: 'Lee'
}

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

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조
console.log(person.firstName + ' '+ person.lastName);

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다. 
person.fullName = 'Heegun Lee';
console.log(person);

// 접근자 프로퍼티를 통한 프로퍼티 값의 챀조 
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다. 
console.log(person.fullName);

// firstName은 데이터 프로퍼티다. 
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName')
console.log(descriptor);
// {value: 'Heegun', writable: true, enumerate:true, configurable:true

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

• 접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법은 다음과 같다.
  - 일반 객체의 proto 는 접근자 프로퍼티다.

      ```jsx
      Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
      //{get:f, set:f, enumerable: true, configurable: true}
      ```
      
  - 함수 객체의 prototype은 데이터 프로퍼티이다.
      
      ```jsx
      Object.getOwnPropertyDescriptor(function(){}, 'prototype')l
      // {value: '...', writable: true, enumerate:true, configurable:true
      ```

  
  

16.4 프로퍼티 정의

---

• Object.defineProperty 메서드를 사용하면 프로퍼티 어트리뷰트를 명시적으로 정의할 수 있다.

즉, 프로퍼티 값을 갱신할 수 있도록 할 것인지, 열거 가능하도록 할 것인지, 재정의 가능하도록 할 것인지의 여부를 명확히 정의할 수 있다.

• Object.defineProperty 메서드를 사용하여 정의하는 경우 객체의 프로퍼티를 누락시키면( 객체의 키, 값만 존재하는 경우) undefined, false가 기본값이다.
• Object.defineProperties 메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의할 수 있다.

const person = {}

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

16.5 객체 변경 방지

---

객체는 변경가능한 값이므로 재할당 없이 직접 변경이 가능하다. 즉 프로퍼티를 추가하거나 삭제할 수 있는 프로퍼티 값을 갱신할 수 있으며, Object.defineProperty 등의 메서드를 사용하여 프로퍼티 어트리뷰트를 재정의 할 수 있다.

• 자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 이들은 객체의 변경을 금지하는 강도가 다르다. 아래로 갈수록 변경 제한이 엄격하다.

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

  • 객체 확장 금지 : 프로퍼티 추가가 금지된다. ObjectExtensible 메서드로 객체 확장 여부를 확인할 수 있다.
  • 객체 밀봉 : 밀봉된 객체는 읽기와 쓰기만 가능하다. 밀봉된 객체 여부는 Object.isSealed 메서드로 확인 가능하다.
  • 객체 동결 : 동결된 객체는 읽기만 가능하다. 동결된 객체 여부는 Object.isFrozen 메서드로 확인 가능하다.

왜 사용하는 걸까?

---

객체 자료형을 자주 사용함에 따라 데이터는 프로그램 도중에 의도치 않게 수정이나 변경될 가능성이 있으므로 객체에 함부로 접근하지 못하게 하기 위해서 객체의 컨트롤이 필요하다.

즉, 프로퍼티 어트리뷰트를 통해 데이터의 정확성 및 무결성에 대한 관리를 손쉽게 할 수 있다고 생각해보았다.