16. 프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드

---

정의

• 내부슬롯, 내부 메서드 : 자바스크립트의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 / 의사 메서드.
• ECMAScript에 등장하는 이중 대괄호로 감싼 이름을 일컬음.
• 원칙적으로는 직접적으로 접근하거나 호출할 수 없지만 일부에 한하여 간접적으로는 접근이 가능하다. (ex. [[Prototype]])

const o = {};

o.[[Prototype]] // -> Uncaught SyntaxError : Unexpected token '['
o.__proto__ // -> Object.prototype

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

---

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

1. 프로퍼티 어트리뷰트 종류

[[Value]] : 프로퍼티의 값
[[Writable]] : 값의 갱신 가능 여부
[[Enumerable]] : 열거 가능 여부
[[Configurable]] : 재정의 가능 여부

2. 프로퍼티 어트리뷰트 확인 방법

ES8 이전 :

Object.getOwnPropertyDescriptor 메서드를 통해 하나의 프로티에 대한 프로퍼티 디스크립터 객체를 반환.

ES8 이후 :

Object.getOwnPropertyDescriptors 메서드를 통해 모든 프로퍼티에 대한 프로퍼티 디스크립터 객체를 반환.

• 첫번째 매개변수 : 객체의 참조, 두번째 매개변수 : 프로퍼티 키
• 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined를 반환

const person = {
  name: 'Lee'
};

console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// {value: 'Lee', writable: true, enumerable: true, configurable: true}

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

---

16.3.1 데이터 프로퍼티 (data property)

키와 값으로 구성된 일반적인 프로퍼티

16.3.2 접근자 프로퍼티 (accessor property)

== getter/setter 함수
다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티, 자체적으로 값을 가지진 않음

프로퍼티 구분 방법

// 일반 객체의 __proto__는 접근자 프로퍼티다
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// {get: f, set: f, enumerable: false, configurable: true}

// 함수 객체 prototype은 데이터 프로퍼티다
Object.getOwnPropertyDescriptor(function() {}, 'prototype');
// {value: {...}, writable: true, enumerable: false, configurable: false}

16.4 프로퍼티 정의

---

1. 프로퍼티 정의

새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것

2. 정의 방법

Object.defineProperty메서드 사용
인수로 객체의 참조, 데이터 프로퍼티 키, 프로퍼티 디스크립터 객체를 전달

const person = {};

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

Object.defineProperty(person, 'lastName', {
  value: 'Lee'
});

// 접근자 프로퍼티 정의
Object.defineProperty(person, 'fullName', {

  // getter 함수
  get() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  // setter 함수
  set(name) {
    [this.firstName, this.lastName] = name.split(' ');
  },
  enumerable: true,
  configurable: true
});

16.5 객체 변경 방지

---

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

16.5.1 객체 확장 금지

• 확장이 금지된 객체는 프로퍼티 추가가 금지됨
  Object.defineProperty메서드, 프로퍼티 동적 추가가 금지됨
• Object.isExtensible메서드 : 확장 가능한 객체인지 확인

16.5.2 객체 밀봉

• 밀봉된 객체는 읽기와 쓰기만 가능함
• Object.seal메서드 : 객체를 밀봉
• Object.isSealed메서드 : 밀봉된 객체인지 확인

16.5.3 객체 동결

• 동결된 객체는 읽기만 가능.
• Object.freeze메서드 : 객체를 동결
• Object.isFrozen메서드 : 동결된 객체인지 확인

16.5.4 불변 객체

객체의 중첩 객체까지 동결하여 불변 객체를 구현하려면 재귀적으로 Object.freeze메서드를 호출해야 함