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

Posted Jul 27, 2022

By your_full_name 21 min read

16.1 내부 슬롯과 내부 메서드

ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)
- 이중 대괄호로 감싸서 표현
자바스트립트 엔진의 구현 알고리즘을 설명
- 내부 로직이므로 원칙적으로는 직접 접근이나 호출 불가

일부 내부 슬롯과 내부 메서드는 간접 접근 가능

모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며 이를 __proto__를 통해 간접 접근 가능

  
  const o = {};
    
  // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다.
  o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '['
    
  // 단, 일부 내부 슬롯과 내부 메서드에 한하여 
  // 간접적으로 접근할 수 있는 수단을 제공하기는 한다.
  o.__proto__ // -> Object.prototype

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

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 기본값으로 자동 정의
프로퍼티 어트리뷰트: 프로퍼티의 상태
- 자바스크립트 엔진이 관리하는 내부 상태 값(meta-property)인 내부 슬롯
- [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
- Object.getOwnPropertyDescriptor 메서드로 프로퍼티 어트리뷰트 간접 확인 가능

Object.getOwnPropertyDescriptor 메서드

  
  const person = {
    name: 'Lee'
  };
    
  // 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
  console.log(Object.getOwnPropertyDescriptor(person, 'name'));
  // {value: "Lee", writable: true, enumerable: true, configurable: true}

첫 번째 매개변수: 객체의 참조
두 번째 매개변수: 프로퍼티 키
반환: 프로퍼티 디스크립터(PropertyDescriptor) 객체
- 프로퍼티 어트리뷰트 정보를 제공
- 존재하지 않는 프로퍼티, 상속받은 프로퍼티에 대해 요구하면 undefined 반환

Object.getOwnPropertyDescriptors 메서드

  
  const person = {
    name: 'Lee'
  };
    
  // 프로퍼티 동적 생성
  person.age = 20;
    
  console.log(Object.getOwnPropertyDescriptors(person));
  /*
  {
    name: {value: "Lee", writable: true, enumerable: true, configurable: true},
    age: {value: 20, writable: true, enumerable: true, configurable: true}
  }
  */

ES8에서 도입
모든 프로퍼티의 프로퍼티 어트리뷰티 정보 제공

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

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분된다.

16.3.1 데이터 프로퍼티

키와 값으로 구성
프로퍼티 어트리뷰트로 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]을 가짐

데이터 프로퍼티의 프로퍼티 어트리뷰트

프로퍼티 생성 시 프로퍼티 어트리뷰트는 기본값으로 자동 정의된다.
[[Value]]의 초깃값은 프로퍼티 값이며 나머지 값은 true이다.

  
const person = {
  name: 'Lee'
};

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

[[Value]]
- 프로퍼티 디스크립터 객체의 프로퍼티: value
- 프로퍼티 값에 접근하면 반환되는 값
[[Writable]]
- 프로퍼티 디스크립터 객체의 프로퍼티: writable
- 프로퍼티 값의 변경 가능 여부
- 불리언 값
[[Enumerable]]
- 프로퍼티 디스크립터 객체의 프로퍼티: enumerable
- 프로퍼티의 열거 가능 여부
- 불리언 값
[[Configurable]]
- 프로퍼티 디스크립터 객체의 프로퍼티: configurable
- 프로퍼티의 재정의 가능 여부
- 불리언 값

16.3.2 접근자 프로퍼티

자체적으로 값을 갖지 않음
- 프로퍼티 어트리뷰트 [[Value]]를 갖지 않는다.
접근자 함수(accessor function)로 구성
- 접근자 함수: 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출
  - getter/setter 함수라고도 한다.
프로퍼티 어트리뷰트로 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]을 가짐
getter/setter 함수는 모두 정의할 수도, 하나만 정의할 수도 있다.

접근자 프로퍼티의 프로퍼티 어트리뷰트

[[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); // Ungmo Lee

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

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

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

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

`[[Get]]` 내부 메서드의 동작

프로퍼티 키가 유효한지 확인
1. 프로퍼티 키는 문자열 또는 심볼이어야 한다.
2. → fullName은 문자열이므로 유효
프로토타입 체인에서 프로퍼티 검색
1. → person 객체에 fullName 프로퍼티 존재
검색된 프로퍼티가 데이터 프로퍼티인지 접근자 프로퍼티인지 확인
1. → fullName 프로퍼티는 접근자 프로퍼티
접근자 프로퍼티의 getter 함수를 호출해 결과 반환
1. → fullName 프로퍼티의 Object.getOwnPropertyDescriptor 메서드가 반환하는 프로프티 디스크립터 객체의 get 프로퍼티 값

프로토타입

어떤 객체의 상위 객체
하위 객체에 자신의 프로퍼티와 메서드 상속
프로토타입 체인: 프로토타입이 단방향 링크드 리스트 형태로 연결된 상속 구조

16.4 프로퍼티 정의

  
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"}

새로운 프로퍼티를 추가하며 프로퍼티 어트리뷰트를 명시적으로 정의 또는 기존 프로퍼티 어트리뷰트를 재정의

Object.defineProperty 메서드 사용

인수로 객체의 참조, 데이터 프로퍼티의 키 문자열, 프로퍼티 디스크립터 객체 전달
value, get, set 프로퍼티를 생략하면 undefined가 기본값으로, writable, enumerable, configurable 프로퍼티를 생략하면 false가 기본값으로 설정된다.

한 번에 하나의 프로퍼티만 정의 가능

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.preventExtensions	X	O	O	O	O
객체 밀봉	Object.seal	X	X	O	O	X
객체 동결	Object.freeze	X	X	O	X	X

16.5.1 객체 확장 금지

  
const person = { name: 'Lee' };

// person 객체는 확장이 금지된 객체가 아니다.
console.log(Object.isExtensible(person)); // true

// person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다.
Object.preventExtensions(person);

// person 객체는 확장이 금지된 객체다.
console.log(Object.isExtensible(person)); // false

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 추가는 금지되지만 삭제는 가능하다.
delete person.name;
console.log(person); // {}

// 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다.
Object.defineProperty(person, 'age', { value: 20 });
// TypeError: Cannot define property age, object is not extensible

Object.preventExtensions
프로퍼티 추가 금지
확장 가능 여부는 Object.isExtensible 메서드로 확인 가능

16.5.2 객체 밀봉

  
const person = { name: 'Lee' };

// person 객체는 밀봉(seal)된 객체가 아니다.
console.log(Object.isSealed(person)); // false

// person 객체를 밀봉(seal)하여 프로퍼티 추가, 삭제, 재정의를 금지한다.
Object.seal(person);

// person 객체는 밀봉(seal)된 객체다.
console.log(Object.isSealed(person)); // true

// 밀봉(seal)된 객체는 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
  name: {value: "Lee", writable: true, enumerable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신은 가능하다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}

// 프로퍼티 어트리뷰트 재정의가 금지된다.
Object.defineProperty(person, 'name', { configurable: true });
// TypeError: Cannot redefine property: name

Object.seal
프로퍼티 추가 및 삭제, 어트리뷰트 재정의 금지
읽기와 쓰기만 가능
밀봉 여부는 Object.isSealed 메서드로 확인 가능

16.5.3 객체 동결

  
const person = { name: 'Lee' };

// person 객체는 동결(freeze)된 객체가 아니다.
console.log(Object.isFrozen(person)); // false

// person 객체를 동결(freeze)하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지한다.
Object.freeze(person);

// person 객체는 동결(freeze)된 객체다.
console.log(Object.isFrozen(person)); // true

// 동결(freeze)된 객체는 writable과 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
  name: {value: "Lee", writable: false, enumerable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신이 금지된다.
person.name = 'Kim'; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 어트리뷰트 재정의가 금지된다.
Object.defineProperty(person, 'name', { configurable: true });
// TypeError: Cannot redefine property: name

Object.freeze
프로퍼티 추가 및 삭제, 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지
읽기만 가능
동결 여부는 Object.isFrozen 메서드로 확인 가능

16.5.4 불변 객체

불변 객체: 객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 객체

객체 확장 금지, 객체 밀봉, 객체 동결은 얕은 변경만 방지

따라서 중첩 객체에는 영향을 주지 않는다.

  
  const person = {
    name: 'Lee',
    address: { city: 'Seoul' }
  };
    
  // 얕은 객체 동결
  Object.freeze(person);
    
  // 직속 프로퍼티만 동결한다.
  console.log(Object.isFrozen(person)); // true
  // 중첩 객체까지 동결하지 못한다.
  console.log(Object.isFrozen(person.address)); // false
    
  person.address.city = 'Busan';
  console.log(person); // {name: "Lee", address: {city: "Busan"}}

불변 객체를 구현하기 위해선 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출

  
  function deepFreeze(target) {
    // 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다.
    if (target && typeof target === 'object' && !Object.isFrozen(target)) {
      Object.freeze(target);
      /*
        모든 프로퍼티를 순회하며 재귀적으로 동결한다.
        Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
        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"}}

먼저 person 객체를 동결한 뒤, forEach에서 name과 address 키에 대해 콜백 함수 실행
deepFreeze("Lee")는 객체가 들어온 게 아니므로 무시되고 deepFreeze({ city: 'Seoul' })는 객체가 들어오므로 동결을 진행

book_notes

모던 자바스크립트 Deep Dive

This post is licensed under CC BY 4.0 by the author.