⭐️내부 슬롯과 내부 메서드

<aside> 🤚

→ 내부 슬롯과 내부 메서드의 개념에 대해 알아보자

• 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 사용하는 의사 프로퍼티와 의사 메서드다.
• ECMAScript 사양에 등장하는 이중 대괄호([[…]])로 감싼 이름들이 내부 슬롯과 내부 메서드다.
• 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.
• 즉 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다.

const o = {};

// 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다.
o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '['
// 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단
o.__proto__ // -> Object.prototype

const obj = { a: 1 };
console.log(obj.a);            // 1 (우리가 직접 쓸 수 있는 프로퍼티)
console.log(obj.__proto__);    // object의 프로토타입(사실은 내부 슬롯 [[Prototype]]을 간접으로 본 것)
 
// 직접 [[Prototype]]을 꺼낼 순 없다!
// console.log(obj.[[Prototype]]); // SyntaxError!!

</aside>

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

<aside> ✂️

→ 프로퍼티 어트리뷰트란?

• 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.
• 4가지 기본값은? 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말한다. → [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
• 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯이다.

→ 프로퍼티 디스크립터 객체 ?

• 위에서 말한 어트리뷰트 정보들을 “객체 형태”로 묶어서 보여주는 도구

→ Object.getOwnPropertyDescritor

• 첫 번째 매개변수에는 객체의 참조를 전달.
• 두 번째 매개변수에는 프로퍼티 키를 문자열로 전달한다.
• 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
• 만약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined 반환된다.

const person = {
	name: 'Lee'
};

// 메서드 호출 방법
// Object.getOwnPropertyDescriptor(obj, key)
// 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체를 반환한다.
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// {value: "Lee", writable: true, enumerable: true, configurable: true}

→ Object.getOwnPropertyDescritors

• ES8에서 도입된 메서드로, 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환

const person = {
	name: 'Lee'
};

// 프로퍼티 동적 생성
person.age = 20;

// 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터
console.log(Object.getOwnPropertyDescritors(person));

/*
 name: {value: "Lee", writable: true, enumerable: true, configurable: true},
 age: {value: 20, writable: true, enumerable: true, cnofigurable: true}
*/

</aside>

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

<aside> 💽

→ 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다.

• 데이터 프로퍼티(data property)
  • 키와 값으로 구성된 일반적인 프로퍼티
  • 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다.
• 접근자 프로퍼티(accessor property)
  • 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티 </aside>

📌 데이터 프로퍼티

<aside> 👨‍💻

→ 데이터 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 정의

| 프로퍼티 어트리뷰트 | 프로퍼티 디스크립터 객체의 프로퍼티 | 설명 | | --- | --- | --- | | [[Value]] | value | 1. 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값 2. 프로퍼티 키를 통해 값을 변경 시 [[Value]] 값을 재할당 3. 프로퍼티가 없으면 프로퍼티 동적 생성 후 [[Value]] 값 저장 | | [[Writable]] | writable | 1. 프로퍼티 값의 변경 여부를 나타내며, 불리언 값 2. [[Writable]] 값이 false 인 경우 프로퍼티의 [[Value]]의 값은 변경할 수 없는 읽기 전용 프로퍼티로 변경 | | [[Enumerable]] | enumerable | 1. 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값 2. [[Enumerable]] 값이 false 인 경우 프로퍼티는 for…in 또는 Object.keys 로 열겨 불가능 | | [[Configurable]] | configurable | 1. 프로퍼티의 재정의 가능 여부를 나타내며, 불리언 값 2. [[Configurable]] 값이 false 인 경우 해당 프로퍼티의 삭제, 프로퍼티 값의 변경이 금지된다. 3. 단 [[Writable]]이 true 인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용된다. |

→ 예제 살펴보기

1. 프로퍼티 생성 시 [[Value]] 값은 프로퍼티 값으로 초기화
2. [[Writable]], [[Enumerable]], [[Configurable]]의 값은 true로 초기화
3. 동적으로 프로퍼티를 추가해도 마찬가지다.

const name = {
	name: 'Lee'
};

// 프로퍼티 동적 생성
person.age = 20;

console.log(Object.getOwnPropertyDescriptors(person));
/*
 name: {value: "Lee", writable: true, enumerable: true, configurable: true},
 age: {value: 20, writable: true, enumerable: true, cnofigurable: true}
*/

</aside>

📌 접근자 프로퍼티

<aside> 👩‍💻

→ 접근자 프로퍼티란?

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

| 프로퍼티 어트리뷰트 | 프로퍼티 디스크립터 객체의 프로퍼티 | 설명 | | --- | --- | --- | | [[Get]] | get | 1. 접근자 프로퍼티를 통해 데이터 프로퍼티 값을 읽을 때 호출되는 접근자 함수 2. 접근자 프로퍼티 키로 프로퍼티 값에 접근하면 [[Get]]의 값, getter 함수가 호출되고, 결과가 프로퍼티 값으로 반환 | | [[Set]] | set | 1. 접근자 프로퍼티를 통해 프로퍼티의 값을 저장할 때 호출되는 접근자 함수 2. 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 [[Set]]의 값, setter 함수가 호출되고, 결과가 프로퍼티 값으로 저장 | | [[Enumerable]] | enumerable | 데이터 프로퍼티의 [[Enumerable]]과 같다 | | [[Configurable]] | configurable | 데이터 프로퍼티의 [[Configurable]]과 같다 |

→ 접근자 함수는 getter/setter 함수라고도 부른다.

const person = {
	// 데이터 프로퍼티
	firstName: 'Ungmo',
	lastName: 'Lee',
	
	// fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
	// getter 함수
	get fullName() {
		return `${this.firstName} ${this.lastName}`;
	},
	//setter 함수
	set fullName(name) {
		// 배열 디스트럭처링 할당: "31.1 배열 디스트럭처링 할당" 참고
		[this.firstName, this.lastName] = name.split(' ');
	}
};

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조.
console.log(person.firstName + ' ' + person.lastName); // Ungmo Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다.
person.fullName = 'Heegun Lee';
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다.
console.log(person.fullName); // Heegun Lee

// firstName은 데이터 프로퍼티다.
// 데이터 프로퍼티의
// 어트리뷰트 [[Value]], [[Writable]] [[Enumerable]], [[Configurable]] 
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log(descriptor);
// {value: "Heegun", writable: true, enumerable: true, configurable: true}

// fullName은 접근자 프로퍼티다.
// 접근자 프로퍼티의
// 어트리뷰트 [[Get]], [[Set]] [[Enumerable]], [[Configurable]] 
descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
// {get: f, set: f, enumerable: true, configurable: true}

→ 정리하기

• person 객체의 firstName과 lastName 프로퍼티는 데이터 프로퍼티다.
• 메서드 앞 get/set 붙은 메서드는 바로 getter/setter 함수이고, getter/setter 함수의 fullName이 접근자 프로퍼티다.
• 접근자 프로퍼티는 [[Value]]을 가지지 않지만, 데이터 프로퍼티의 값을 읽거나 저장할 때 관여한다.

→ 내부 슬롯/메서드로 접근자 프로퍼티 fullName 동작

1. 프로퍼티 키 유효성 확인 → 문자열 또는 심벌 fullName은 문자열로 유효하다.
2. 프로토타입 체인에서 프로퍼티 검색 → person 객체에 fullName 프로퍼티 존재 확인.
3. 검색된 fullName 프로퍼티 방식 확인 → fullName 프로퍼티는 접근자 프로퍼티.
4. 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 → [[Get]]의 값, getter 함수를 호출하여 결과를 반환한다.

→ 접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법

• 디스크립터로 확인하기

// 일반 객체의 __proto__는 접근자 프로퍼티다.
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// {get: f, set: f, enumerable: false, configurable: true}

// 함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function(){}, 'prototype');
// {value: {...}, writable: true, enumerable: false, configurable: false}

→ 정리하기

• proto → 값이 없지만, 안내를 해주는 표지판 같은 역할
• prototype → 값이 존재하며, 기본값 세팅과 같은 역할

→ 그래서 이거 왜 알아야함..?

1. 객체가 동작하는 방식 ( 내부 로직 ) 알기
2. 값을 읽거나 쓸 때 중간마다 원하는 동작을 편리하게 넣을 수 있다.
3. 라이브러리나 프레임워크를 만들 때 사용자 접근은 막고 어떤 환경에서든 같은 결과를 내기 위해서는 이를 알아야함

</aside>

⭐️프로퍼티 정의

<aside> 🦸

</aside>

⭐️객체 변경 방지

<aside> 🗣️

</aside>

📌 객체 확장 금지

<aside> 🔒

</aside>

📌 객체 밀봉

<aside> 🤐

</aside>

📌 객체 동결

<aside> 🧊

</aside>