[TIL/모던 자바스크립트 Deep Dive] 2023/07/10

16장. 프로퍼티 어트리뷰트 🟢

16-1. 내부 슬롯과 내부 메서드 🟡

프로퍼티 어트리뷰트를 이해하기 위해, 먼저 ``내부 슬롯(internal slot)`과 `내부 메서드(internal method)``의 개념에 대해 알아봤다.

~~내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)이다.~~

이렇게 설명해놓으면, 말하는 감자(=본인)는 뭘 보고 이해하나!

이중 대괄호 ``[[...]]`로 감싼 `이름``들이 내부 슬롯 또는 내부 메서드다. 내부 슬롯과 내부 메서드는 결론적으로 자바스크립트 엔진의 '내부 로직'이다. 다만, 내부 슬롯은 객체의 내부적인 속성이고, 내부 메서드는 객체의 특정한 동작을 수행하기 위해 호출되는 메서드이다. 나름 쉽게 정리했지만, 코드를 보는 것이 가장 직관적이다. 책에는 예제가 부족해서 GPT를 괴롭혔다.

let arr = [1, 2, 3];

// 내부 슬롯인 [[Prototype]]에 대한 접근
let prototype = Object.getPrototypeOf(arr);
console.log(prototype); // Array.prototype

// 내부 메서드인 [[Get]]을 사용하여 배열의 요소에 접근
let firstElement = arr[0];
console.log(firstElement); // 1

// 내부 메서드인 [[Set]]을 사용하여 배열의 요소를 변경
arr[1] = 5;
console.log(arr); // [1, 5, 3]

// 내부 메서드인 [[Delete]]를 사용하여 배열의 요소를 삭제
delete arr[2];
console.log(arr); // [1, 5, empty]

// 내부 메서드인 [[Length]]를 사용하여 배열의 길이 확인
let length = arr.length;
console.log(length); // 3

// 내부 메서드인 [[DefineOwnProperty]]를 사용하여 배열의 속성 정의
Object.defineProperty(arr, 3, {
  value: 4,
  writable: true,
  enumerable: true,
  configurable: true,
});
console.log(arr); // [1, 5, empty, 4]

자바스크립트 엔진의 내부 로직이기에, 원칙적으로는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공할 뿐이다.

16-2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 🟡

자바스크립트 엔진은 프로퍼티를 생성할 때, 프로퍼티의 상태를 나타내는 ``프로퍼티 어트리뷰트``를 기본값으로 자동 정의한다.

여기서 프로퍼티의 상태란, ``프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)``를 말한다. 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다.

첫 번째 매개변수에는 객체의 참조를 전달하고, 두 번째 매개변수에는 프로퍼티 키를 문자열로 전달한다. 이때 Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 ``프로퍼티 디스크립터(Property Discriptor) 객체``를 반환한다. 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined가 반환된다.

Object.getOwnPropertyDescriptor 메서드는 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체를 반환하지만 ES8에서 도입된 Object.getOwnPropertyDescriptor's' 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다.

중간 정리!

'내부 슬롯'은 객체의 개념적인 부분(=속성)을 다룬다. prototype이나 extensible가 대표적이다.

'내부 메서드'는 객체의 내부 동작을 담당한다.

내부 슬롯과 내부 메서드는 ``[[뭐시기뭐시기]]`` 형태로 나타난다.

'프로퍼티(key:value)'를 생성하면 기본 세팅값으로 '프로퍼티 어트리뷰트'가 자동으로 정의된다. 프로퍼티 어트리뷰트에 직접 접근할 수는 없고 discriptor 메서드를 통해 간접적으로 확인할 수 있다.

Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트들이 담아져 있는 프로퍼티 디스크립터라는 객체를 반환한다.

Object.getOwnPropertyDescriptor's' 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다.