[모던자바스크립트 딥다이브] 16장 프로퍼티 어트리뷰트 (1)

내부 슬롯과 내부 메서드

• 내부 슬롯(internal slot) 과 내부 메서드(internal method) : 자바스크립트 엔진의 내부 로직.
• ECMAScript 사양을 설명할 때 사용하는 의사 프로퍼티, 의사 메서드
• 원칙적으로 직접 접근 불가. 일부 내부 슬롯과 내부 메서드에 한해서 간접적으로 접근 가능
• [[Prototype]] 내부 슬롯은 proto 를 통해 간접적으로 접근 가능

const obj = {}
obj.[[Prototype]] //접근 불가
obj.__proto__ // 접근 가능

[참고 영상] 내부 슬롯과 내부 메소드

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

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 자동으로 생성한다.
프로퍼티 어트리뷰트란 프로퍼티의 값, 갱신여부, 열거가능 여부, 재정의 가능 여부 등의 프로퍼티 상태를 나타내는 것으로 내부 슬롯이므로 직접 접근이 불가능하지만 Object.getOwnPropertyDescriptor 메소드를 통해 간접적으로 프로퍼티 디스크립터 객체를 받아 확인 가능

• 프로퍼티 어트리뷰트 : 프로퍼티의 상태를 나타낸다. 내부 슬롯이므로 직접 접근 불가.
  • Object.getOwnPropertyDescriptor 메소드를 통해 간접적으로 확인 가능
  • Object.getOwnPropertyDescriptor 메소드를 통해 얻는 객체 → 프로퍼티 디스크립터 객체
  • 프로퍼티 디스크립터 객체 : 프로퍼티 어트리뷰트 정보를 제공한다.
• 프로퍼티 상태 : 프로퍼티의 값, 값의 갱신 여부, 열거 가능 여부(enumerable), 재정의 가능 여부

const person = {
    name : 'Shin',
    age : 15
}

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

// 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
console.log(Object.getOwnPropertyDescriptors(person))
// → Object { name: Object { value: "Shin", writable: true, enumerable: true, configurable: true }, age: Object { value: 15, writable: true, enumerable: true, configurable: true } }

[참고 링크] Object.getOwnPropertyDescriptors()

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

1. 데이터 프로퍼티

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

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

[[Value]]

• 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환 되는 값
• 프로퍼티 키를 통해 값을 변경하면 [[Value]]에 값을 재할당 하는 형태로 동작

[[Writable]]

• 프로퍼티 값의 변경 가능 여부

[[Enumerable]]

• 프로퍼티 열거 가능 여부, false 시 for…in 등을 통해 열거할 수 없다

[[Configurable]]

• 프로퍼티 재정의 여부

2. 접근자 프로퍼티

• 접근자 프로퍼티 : 자체적으로 값을 가지지 않음. 다른 프로퍼티의 값을 읽거나 저장 할때 호출되는 접근자 함수로 구성된 프로퍼티

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

[[Get]]

• 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수

[[Set]]

• 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수

[[Enumerable]]

[[Configurable]]

const obj = {
  arr: ['a', 'b', 'c'],
  get accessGetTest() {
    return this.arr[this.arr.length - 1];
  },
  set accessSetTest(arr) {
    arr.push('추가~')
    this.arr = arr
    return this.arr
  },
};

console.log(obj.accessGetTest)
// → c
console.log(obj.accessSetTest = ['d', 'e', 'f'])
// → Array ["d", "e", "f", "추가~"]

/**
 * arr : 일반적인 데이터 프로퍼티
 * accessGetTest, accessSetTest : 접근자 함수로 구성된 접근자 프로퍼티
 **/

[참고 링크] 접근자