프로퍼티와 어트리뷰트

내부 슬롯과 내부 메서드

내부 슬롯과 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드입니다. 접근이 가능하도록 공개된 프로퍼티는 아니지만, 일부는 간접적으로 접근이 가능합니다. 모든 객체는 [[Prototype]] 내부 슬롯을 가지며, __prpto__를 통해 간접적으로 접근이 가능합니다.

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

프로퍼티 어트리뷰트

프로퍼티를 생성할 때 자바스크립트는 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 자동으로 정의합니다. 프로퍼티 상태로는 아래 4가지가 있습니다.

• 값(value)
• 값의 갱신 가능 여부(writable)
• 열거 가능 여부(enumerable)
  • for…in 문/ Object.keys 메서드 사용이 가능한가
• 재정의 가능 여부(configurable)
  • false: 프로퍼티 삭제, 값 변경 불가능
  • true: writable 이 true인 경우, 값 변경 가능 & [[Writable]] false로 변경 가능

프로퍼티 디스크립터

프로퍼티 어트피뷰트에 직접 접근은 불가하지만, Object.getOwnPropertyDescriptor 메서드를 통해 간적접으로 확인이 가능합니다.

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

프로퍼티 구분 - 데이터 프로퍼티/ 접근자 프로퍼티

데이터 프로퍼티

키와 값으로 이루어진 프로퍼티입니다. 앞서 살펴본 프로퍼티들이 데이터 프로퍼티입니다.

접근자 프로퍼티

get, set 키워드 정의되는 접근자 함수의 프로퍼티입니다. 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출됩니다. 이러한 접근자 프로퍼티는 다음 4가지 어트리뷰트를 갖습니다. [[Get]], [[Set]], [[Enumerable]], [[Configurable]]

const user = {
    name: "user",
    get userName() {
        return this.name;
    },
};
descriptor = Object.getOwnPropertyDescriptor(user, "userName");
console.log(descriptor);
// {get: ƒ, set: undefined, enumerable: true, configurable: true}

참고자료

• 모던 자바스크립트 Deep Dive