[자바스크립트] 내부 슬롯, 내부 메서드

내부 슬롯, 내부 메서드

• ECMAScript에서 사용하는 의사 프로퍼티(pseudo property), 의사 메서드(pseudo method)
• ECMAScript에서 이중 대괄호로 감싸서 표현
• 실제로 동작하지만, 개발자가 접근할 수 없음
  • 자바스크립트 엔진의 내부 로직
  • 일부 내부 슬롯, 내부 메서드에 한하여 간접적으로 접근 가능
• 예시
  • 모든 객체 [[Prototype]] 내부 슬롯 직접 접근 불가능, proto로 접근 가능

1 2 3

const o = {}; o.[[prototype]] // Error o.__proto__ // Object.prototype

cs

프로퍼티 어트리뷰트

• 객체에서 프로퍼티 생성할 때, 프로퍼티 상태 나타내는 어트리뷰트도 함께 생성
• 내부슬롯이어서 직접 접근 불가능
• Object.getOwnPropertyDescriptor 사용해서 간접적 확인 가능

1 2 3 4

const person = {name:’Lee’}; console.log(Object.getOwnPropertyDescriptor(person, ‘name’)); // {value : ‘Lee’, writable : true, enumerable: true, configurable: ture}   Colored by Color Scripter

cs

• 종류(데이터 프로퍼티의 경우)
  • 데이터 프로퍼티 : 일반적 프로퍼티, 데이터 프로퍼티 외에 접근자 프로퍼티도 있음
    • [[value]] : 값
    • [[writable]] : 갱신 가능여부
    • [[enumerable]] : 열거 가능 여부
    • [[configurable]] : 재정의 가능 여부
  • 갱신과 재정의의 차이 :
    • 갱신 가능할경우, 해당 프로퍼티를 덮어 쓸 수 있음
    • 재정의 가능할 경우, 삭제하거나 재정의 불가능

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Object.defineProperty(person, ‘firstName’, {     value:’Jango’ }); // value만 명시해줄경우, 나머지 속성들 false console.log(Object.getOwnPropertyDescriptor(person, ‘firstName’); // {value:’Jango’, writable: false, enumerable: false, configurable : false};   person.firstName = ‘Dingo’; // 갱신 불가능, writable = false이므로 // 에러발생하진 않고 무시됨   delete person,firstName; // 삭제 불가능, configurable = false이므로 // 에러 발생하진 않고 무시됨   Object.defineProperty(person, ‘lastName, {enumerable:true})  // 재정의 불가능, configurable = false이므로 // 에러 발생   Colored by Color Scripter

cs

프로퍼티 종류

• 데이터 프로퍼티 : 일반적 프로퍼티
  • 앞의 프로퍼티 어트리뷰트를 가짐
• 접근자 프로퍼티 : 값을 갖지 않고, 다른 프로퍼티 읽거나 저장할때 사용
  • 프로퍼티 어트리뷰트
    • [[get]] : 데이터 프로퍼티 값읽을때 호출
    • [[set]] : 데이터 프로퍼티 값 저장할때 호출
    • [[enumerable]] : 데이터 프로퍼티 enumerable과 일치
    • [[configurable]] : 데이터 프로퍼티 configurable과 일치

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

const person = {     // 데이터 프로퍼티     firstName : ‘Jango’,     lastName : ‘Han’       // 접근자 프로퍼티     get fullName() {         return `${this.firstName} ${this.lastName}`;     } set fullName(name) {         [this.firstName, this.lastName] = name.split(‘ ‘);     } }   console.log(person.fullName); // Jango Han person.fullName = ‘HY L’ console.log(person.firstName); // HY console.log(person.lastName); // L

cs

출처

• 모던 자바스크립트 Deep Dive[이웅모 지음], Ch.16