모던JS딥다이브 공부정리용 글입니다.

16_ 프로퍼티 어트리뷰트

16.1_ 내부 슬롯과 내부 메서드(p219)

• 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.
  < ECMAScript 사양에서 ([[...]]) 이중 대괄호로 감싼 이름들>
• 내부 슬롯과 내부 메서드는 JS엔진에서 실제로 동작하지만 개발자가 직접 접근 가능한 외부 공개 프로퍼티는 아니다.
• 내부 슬롯과 내부 메서드는 JS엔진의 내부 로직으로 원칙적으로 JS는 내부 슬롯과 메서드에 직접 접근이나 호출할 방법을 제공하지 않는다.
• 단, 일부에 대해 간접 접근을 허용한다.

  예)
  모든 객체는 [[Prototype]]이라는 내부 슬롯을 가진다.
  프로토타입 내부 슬롯의 경우 __proto__를 이용하여 간접 접근이 가능하다.

  const o = {};
  o.[[Prototype]]; .. Uncaught SyntaxError : Unexpected token '['
  o.__proto__  // Object.prototype

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

• JS엔진은 프로퍼티를 생성할 때, 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의.
• 프로퍼티의 상태 ( 값, 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)을 의미
• 프로퍼티 어트리뷰트 : 내부 상태 값인 내부 슬롯 [[value]], [[writable]], [[configurable]], [[enumarable]].

내부 슬롯은 직접 접근 불가 but 간접 접근 가능 Object.getOwnPropertyDescriptor(person, 'name');

• 첫번째 매개변수는 객체를 참조
• 두번째 매개변수는 프로퍼티 키를 문자열로 전달.
• 메서드는 프로퍼티 디스크립터 객체를 반환
• 존재하지 않는 프로퍼티나 상속받은 프로퍼티는 undefined 반환
• getOwnPropertyDescriptor는 하나의 프로퍼티만 getOwnPropertyDescriptors는 모든 프로퍼티 반환

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

• 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분됨.

• 데이터 프로퍼티 : 키와 값으로 구성된 일반적 프로퍼티
• 접근자 프로퍼티 : 자체적 값을 가지고 있지 않지만 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성됨.

16.3.1_ 데이터 프로퍼티

프로퍼티 어트리뷰트 : 프로퍼티 디스크립터 객체의 프로퍼티 : 설명

[[Value]] : value : 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값.
[[Writable]] : writable : 프로퍼티 값의 변경 가능 여부를 나타내는 불리언 값을 가짐.
[[Enumerable]] : enumerable : 프로퍼티의 열거가능여부(true; for...in이나 Object.keys 메서드 등으로 열거 가능)
[[Configurable]] : configurable : 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 가짐.(프로퍼티 삭제나 프로퍼티 어트리뷰트의 값(ex; Enumerable:true...) 변경 불가. but writable을 false로 변경하는 것은 허용.

const person = {
  name: 'Lee'
};

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

주의: 프로퍼티를 동적 추가나 생성할 때 어트리뷰트 설정을 안하면 어트리뷰트의 기본값은 true로 설정된다.

16.3.2_ 접근자 프로퍼티

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

  프로퍼티 어트리뷰트 : 프로퍼티 디스크립터 객체의 프로퍼티 : 설명

[[Get]] : get : 접근자를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자함수
[[Set]] : set : 접근자를 통해 데이터 프로퍼티의 값을 저장할 때 호출 접근자 함수
[[Enumerable]] : enumerable : 프로퍼티의 열거가능여부(true; for...in이나 Object.keys 메서드 등으로 열거 가능)
[[Configurable]] : configurable : 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 가짐.(프로퍼티 삭제나 프로퍼티 어트리뷰트의 값(ex; Enumerable:true...) 변경 불가. but writable을 false로 변경하는 것은 허용.

접근자 함수는 getter/setter 함수라고도 부른다.

const person = {
  firstName : "JH",
  lastName : "Cho",
  
  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  },
  
  set fullName(name){
    [this.firstName, this.lastName] = name.split(' ');
  }
};

//데이터 프로퍼티를 통한 참조
console.log(person.firstName + ' ' + person.lastName;
            
// 접근자 프로퍼티를 통한 값 저장 (setter 함수 호출)
person.fullName = 'Kim Lee';
console.log(person) // {firstName : 'Kim', lastName : 'Lee'}

// 접근자 프로퍼티를 통한 값 참조 (getter 함수 호출)
console.log(person.fullName); // Kim Lee

• firstName과 fullName을 getOwnPropertyDescriptor로 어트리뷰트를 확인해보면

firstName과 fullName 프로퍼티는 다른 어트리뷰트를 가지고 있음을 확인 가능

• 접근자 프로퍼티는 함수만을 쓰면 호출 시 ()소괄호를 붙여줘야하고 get이나 set을 앞에 붙여주면 소괄호 없이 호출이 가능하다.

• 일반 객체의 프로토타입은 접근자, 함수 객체의 프로토타입은 데이터 프로퍼티이다.

16.4_ 프로퍼티 정의

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

• Object.defineProperty 메서드

const person = {};

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

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

let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log('firstName', descriptor);
// firstName {value: "Ungmo", writable: true, enumerable: true, configurable: true}

// 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
console.log('lastName', descriptor);
// lastName {value: "Lee", writable: false, enumerable: false, configurable: false}

// [[Enumerable]]의 값이 false인 경우
// 해당 프로퍼티는 for...in 문이나 Object.keys 등으로 열거할 수 없다.
// lastName 프로퍼티는 [[Enumerable]]의 값이 false이므로 열거되지 않는다.
console.log(Object.keys(person)); // ["firstName"]

// [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없다.
// lastName 프로퍼티는 [[Writable]]의 값이 false이므로 값을 변경할 수 없다.
// 이때 값을 변경하면 에러는 발생하지 않고 무시된다.
person.lastName = 'Kim';

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 삭제할 수 없다.
// lastName 프로퍼티는 [[Configurable]]의 값이 false이므로 삭제할 수 없다.
// 이때 프로퍼티를 삭제하면 에러는 발생하지 않고 무시된다.
delete person.lastName;

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 재정의할 수 없다.
// Object.defineProperty(person, 'lastName', { enumerable: true });
// Uncaught TypeError: Cannot redefine property: lastName

descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
console.log('lastName', descriptor);
// lastName {value: "Lee", writable: false, enumerable: false, configurable: false}

// 접근자 프로퍼티 정의
Object.defineProperty(person, 'fullName', {
  // getter 함수
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  // setter 함수
  set(name) {
    [this.firstName, this.lastName] = name.split(' ');
  },
  enumerable: true,
  configurable: true
});

descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log('fullName', descriptor);
// fullName {get: ƒ, set: ƒ, enumerable: true, configurable: true}

person.fullName = 'Heegun Lee';
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

• 정의 시 생략한 어트리뷰트의 기본값(228p 참고)

• Object.defineProperties 메서드 (여러개 정의 가능)

const person = {};

Object.defineProperties(person, {
  // 데이터 프로퍼티 정의
  firstName: {
    value: 'Ungmo',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Lee',
    writable: true,
    enumerable: true,
    configurable: true
  },
  // 접근자 프로퍼티 정의
  fullName: {
    // getter 함수
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    // setter 함수
    set(name) {
      [this.firstName, this.lastName] = name.split(' ');
    },
    enumerable: true,
    configurable: true
  }
});

person.fullName = 'Heegun Lee';
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

16.5_ 객체 변경 방지

• 객체는 변경 가능한 값이므로 재할당 없이 직접 변경 가능

• 객체 변경 방지하는 다양한 메서드 ( 추가, 삭제, 읽기, 쓰기, 어트리뷰트 재정의 )
  Object.preventExtension (추가 금지)
  Object.seal (추가, 삭제, 어트리뷰트 재정의 금지)
  Object.freeze (읽기 제외 다 금지)

1. 확장(추가)
   프로퍼티 추가는 불가 삭제는 가능
2. 밀봉(seal)
   밀봉된 객체는 읽기와 쓰기만 가능.(값 추가 삭제는 안되지만 갱신은 가능)
3. 동결
   읽기만 가능.

16.5.4_ 불변객체

• freeze해도 중첩 객체까지 동결 불가.
• 중첩 객체까지 동결하기 위해서는 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출

function deepFreeze(target) {
  // 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다.
  if (target && typeof target === 'object' && !Object.isFrozen(target)) {
    Object.freeze(target);
    /*
      모든 프로퍼티를 순회하며 재귀적으로 동결한다.
      Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
      ("19.15.2. Object.keys/values/entries 메서드" 참고)
      forEach 메서드는 배열을 순회하며 배열의 각 요소에 대하여 콜백 함수를 실행한다.
      ("27.9.2. Array.prototype.forEach" 참고)
    */
    Object.keys(target).forEach(key => deepFreeze(target[key]));
  }
  return target;
}

const person = {
  name: 'Lee',
  address: { city: 'Seoul' }
};

// 깊은 객체 동결
deepFreeze(person);

console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결한다.
console.log(Object.isFrozen(person.address)); // true

person.address.city = 'Busan';
console.log(person); // {name: "Lee", address: {city: "Seoul"}}