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

16.1 내부 슬롯(Internal Slot)과 내부 메서드(Internal Method)

내부 슬롯과 내부 메서드

: 자바 스크립트 엔진의 구현알고리즘을 설명하기 위해 EMCAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드. ([[…]] 이중 대괄호로 감싸진 이름들)

: 자바스크립트 엔진의 내부 로직이므로 원칙적으로 직접 접근하거나 호출할 수 있는 방법을 제공하지 않음. 하지만 일부에 한해 간접적으로 접근할 수 있는 수단을 제공하기는 한다. e.g) ‘[[Prototype]]’ → ‘proto’로 간접 접근 가능

 

16.2 프로퍼티 어트리뷰트(Property Attributes)와 프로퍼티 디스크립터(Property Descriptor) 객체

프로퍼티 어프리뷰트는 객체가 가지는 내부적 특성, 프로퍼티 디스크립터는 이런 프로퍼티 어트리뷰트를 설명하는 객체

프로퍼티 어트리뷰트

: 프로퍼티가 생성될 때 자동 정의되며 내부 슬롯이기 때문에 직접 접근할 수는 없지만 Object.getOwnPropertyDescriptor 메서드로 간접 확인은 가능하다.

• [[Value]] - 프로퍼티의 값
• [[Writable]] - 프로퍼티의 값이 변경 가능한지를 나타내는 boolean 값
• [[Enumerable]] - 프로퍼티가 for...in 루프나 Object.keys() 메서드 등을 통해 열거 가능한지를 나타내는 boolean 값
• [[Configurable]] - 프로퍼티의 어트리뷰트를 나중에 변경할 수 있거나 프로퍼티를 객체에서 삭제할 수 있는지를 나타내는 boolean 값

프로퍼티 디스크립터

: Object.getOwnPropertyDescriptor 가 반환하는 객체로 프로퍼티 어트리트뷰트 정보를 제공함

 

 

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

데이터 프로퍼티

: 위에서 본 프로퍼티 어트리뷰트들 ⇒ value, writable, enumerable, configurable

접근자 프로퍼티

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

: get, set, enumerable, configurable을 가진다.

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

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

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

Object.getOwnPropetyDescriptor(Object.prototype, '__proto__');
// {get: f, set: f, enumerable: true, configurable: true}

Object.getOwnPropetyDescriptor(function() {}, 'prototype');
// value: {...}, writable: true, enumerable: true, configurable: true}

: 일반 객체의 ‘proto’는 접근자 프로퍼티이고, 함수 객체의 ‘prototype’은 데이터 프로퍼티다.

• 프로토타입 Prototype프로토타입 체인은 단방향 링크드 리스트 형태로 연결되어 있는 상속 구조이다. 객체의 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티나 메서드가 없다면 프로퍼타입 체인을 따라 차례로 검색한다.
• 프로토타입은 어던 객체의 상위 객체의 역할을 하는 객체이다. 프로토타입은 하위 객체에게 자신의 프로퍼티와 메서드를 상속한다. 프로토타입 객테의 프로퍼티나 메서드를 상속받은 하위객체는 자신의 프로퍼티 또는 메서드인 것 처럼 사용할 수 있다.

 

16.4 프로퍼티 정의

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

: ‘Object.defineProperty()’ 메서드를 사용해 정의 가능

let person = {};

Object.defineProperty(person, 'name', {
  value: 'John',
  writable: false,
  enumerable: true,
  configurable: false
});

: ‘Object.defineProperties()’ 메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의 가능

let person = {};

Object.defineProperties(person, {
  firstName: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Doe',
    writable: true,
    enumerable: true,
    configurable: true
  },
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(value) {
      [this.firstName, this.lastName] = value.split(' ');
    },
    enumerable: true,
    configurable: true
  }
});

 

 

16.5 객체 변경 방지

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

객체 확장 금지

Object.preventExtensions

: 프로퍼티 추가가 금지된다. ‘Object.isExtensible’ 메서드로 확장 가능한 객체인지 확인할 수 있다.

객체 밀봉

Object.seal

: 객체 읽기 쓰기(프로퍼티 값 읽기, 쓰기)만 가능하다. ‘Object.isSealed’ 메서드로 확인할 수 있다.

객체 동결

Object.freeze

: 객체 읽기(프로퍼티 값 읽기)만 가능하다. ‘Object.isFrozen’ 메서드로 확인할 수 있다.

불변 객체

: 위 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다. 중첩 객체까지 동결하여 변경 불가능한 불변객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.

function deepFreeze(target) {
	if (target && typeof target === 'object' && !Object.isFrozen(target)) {
		Object.freeze(target);
		Object.keys(target).forEach(key => deepFreeze(target[key]));
	}
	return target;
}