[모던자바스크립트] 16. 프로퍼티 어트리뷰트

✅ 1. 내부 슬롯과 내부 메서드

• 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드
• 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부 메서드

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

• 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의
  • 프로퍼티 상태 : 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)를 말함
• Object.getOwnPropertyDescriptor메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환

✅ 3. 데이터 프로퍼티와 접근자 프로퍼티

✔️ 데이터 프로퍼티

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

  프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
  [[Value]]	value	프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값
  [[Writable]]	writable	프로퍼티 값의 변경 가능 여부를 나타냄, 불리언 값
  [[Enumerable]]	enumerable	프로퍼티의 열거 가능 여부를 나타냄, 불리언 값
  [[Configurable]]	configurable	해당 프로퍼티의 삭제, 어트리뷰트의 값 변경이 금지

✔️ 접근자 프로퍼티

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

  프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
  [[Get]]	get	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자
  [[Set]]	set	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자

✅ 4. 프로퍼티 정의

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

• 객체의 프로퍼티가 어떻게 동작해야 하는지를 명확히 정의할 수 있음

• Object.defineProperty 메서드를 사용하여 어트리뷰트 정의 가능, 한 번에 하나의 프로퍼티만 정의

• Object.defineProperties메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의할 수 있음

  const person = {};
  
  Object.defineProperty(person, "firstname", {
    value: "ahyun",
    writable: true,
    enumerable: true,
    configurable: true,
  });
  
  Object.defineProperty(person, "lastname", {
    value: "Lee",
  });
  
  let descriptor1 = Object.getOwnPropertyDescriptor(person, "firstname"); // {value: 'ahyun', writable: true, enumerable: true, configurable: true}
  let descriptor2 = Object.getOwnPropertyDescriptor(person, "lastname"); // {value: 'Lee', writable: false, enumerable: false, configurable: false}
  
  console.log(Object.keys(person)); // lastname은 enumerable이 false이기 때문에 열거되지 않음
  
  person.lastname = "kim"; // lastname은 writable이 false이기 때문에 value가 변경되지 않음, 아래줄의 코드에서 value는 그대로 Lee가 출력
  console.log(descriptor2);
  
  delete person.lastname; // lastname은 configurable이 false이기 때문에 삭제되지 않음
  console.log(descriptor2);
  
  Object.defineProperty(person, "lastname", { enumerable: true }); // Uncaught TypeError TypeError: Cannot redefine property: lastname

✅ 5. 객체 변경 방지

• 자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공, 금지하는 강도가 다름

✔️ 객체 확장 금지

• Object.preventExtensions
• 프로퍼티 추가 금지
• Ojbect.isExtensible을 통해 확장이 가능한 객체인지 확인

✔️ 객체 밀봉

• Object.seal
• 읽기와 쓰기만 가능
• Object.isSealed 메서드로 확인 가능

✔️ 객체 동결

• Object.freeze
• 읽기만 가능
• Object.isFrozen 메서드로 확인 가능

✔️ 불변 객체

• 객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현
• Object.freeze메서드를 재귀적으로 모든 프로퍼티에 호출해야함