16.1 내부 슬롯과 내부 메서드
- ECMAScript에서 사용하는 의사 프로퍼티(pseudo property), 의사 메서드(pseudo method)
- 실제로 동작하지만, 개발자가 접근할 수 없음
- 자바스크립트 엔진의 내부 로직
- 일부 내부 슬롯, 내부 메서드에 한하여 간접적으로 접근 가능
const o = {};
o.[[Prototype]]
o.__proto__
16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체
- 프로퍼티를 생성할 때 프로퍼티 어트리뷰트는 기본값으로 자동 정의됨
const person = {
name: 'Lee'
};
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
getOwnPropertyDescriptor 메서드
- 프로퍼티 디스크립터 객체를 반환
- 프로퍼티 디스크립터 : 프로퍼티 어트리뷰트 정보를 제공
- 매개변수
- 첫번째 : 객체의 참조
- 두번째 : 프로퍼티 키
getOwnPropertyDescriptors 메서드
- 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 반환
const person = {
name: 'Lee'
};
person.age = 20;
console.log(Object.getOwnPropertyDescriptors(person));
16.3 데이터 프로퍼티와 접근자 프로퍼티
- 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티
- 접근자 프로퍼티 : 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티
16.3.1 데이터 프로퍼티
const person = {
name: 'Lee'
};
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
데이터 프로퍼티의 프로퍼티 어트리뷰트 종류
| 프로퍼티 어트리뷰트 | 디스크립터 객체에서의 프로퍼티 | 설명 | 값이 false일 때 |
|---|
| [[Value]] | value | 키를 통해 접근할 때 반환되는 값 | 해당사항없음 |
| [[Writable]] | writable | 프로퍼티 값의 변경 가능 여부 | 값을 변경할 수 없음 (읽기 전용 프로퍼티) |
| [[Enumerable]] | enumerable | 프로퍼티 열거 가능 여부 | for … in, Object.keys로 열겨할 수 없음 |
| [[Configurable]] | configurable | 프로퍼티 재정의 가능 여부 | 프로퍼티의 삭제, 어트리뷰트 값의 변경이 금지 된다 |
프로퍼티 어트리뷰트 값의 초기화
- true로 초기화된다.
- 다만,
defineProperty 메서드로 어트리뷰트를 정의할 때 프로퍼티가 누락되면 false로 초기화된다.
const person = {
name: 'Lee'
};
person.age = 20;
console.log(Object.getOwnPropertyDescriptors(person));
16.3.2 접근자 프로퍼티
접근자 프로퍼티의 프로퍼티 어트리뷰트 종류
| 프로퍼티 어트리뷰트 | 디스크립터 객체에서의 프로퍼티 | 설명 |
|---|
| [[Get]] | get | 프로퍼티 키로 프로퍼티 값에 접근하면 [[Get]]의 값인 getter 함수가 호출됨 |
| [[Set]] | Set | 프로퍼티 키로 프로퍼티 값을 저장하면 [[Set]]의 값인 setter 함수가 호출됨 |
| [[Enumerable]] | enumerable | 프로퍼티 열거 가능 여부 |
| [[Configurable]] | configurable | 프로퍼티 재정의 가능 여부 |
const person = {
firstName: 'Ungmo',
lastName: 'Lee',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(' ');
}
};
console.log(person.firstName + ' ' + person.lastName);
person.fullName = 'Heegun Lee';
console.log(person);
console.log(person.fullName);
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log(descriptor);
descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);
데이터 프로퍼티와 접근자 프로퍼티를 구별하는 법
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
Object.getOwnPropertyDescriptor(function() {}, 'prototype');
16.4 프로퍼티 정의
defineProperty 메서드
- 프로퍼티의 어트리뷰트를 정의
- 인수
- 첫번째 : 객체의 참조
- 두번째 : 프로퍼티의 키
- 세번째 : 프로퍼티 디스크립터 객체
const person = {};
Object.defineProperty(person, 'firstName', {
value: 'Ungmo',
writable: true,
enumerable: true,
configurable: true
});
-
defineProperty 메서드 사용시 디스크립터 객체의 프로퍼티 값이 누락(생략)된 경우
- undefined, false로 기본값을 가짐
Object.defineProperty(person, 'lastName', {
value: 'Lee'
});
descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
console.log('lastName', descriptor);
-
[[Enumerable]]이 false 경우
- 해당 프로퍼티를 제외하고 [[Enumerable]]이 true인 프로퍼티만 열거된다.
console.log(Object.keys(person));
-
[[Writable]]의 값이 false인 경우
- 프로퍼티의 [[Value]]값을 변경할 수 없다
- 변경을 시도하면 에러가 발생하지 않고 무시된다.
delete person.lastName;
-
[[Configurable]]의 값이 false인 경우
- 해당 프로퍼티를 재정의할 수 없다.
- 재정의를 시도하면 에러가 발생
Object.defineProperty(person, 'lastName', { enumerable: true });
16.5 객체 변경 방지
| 구분 | 메서드 | 프로퍼티 추가 | 프로퍼티 삭제 | 프로퍼티 값 읽기 | 프로퍼티 값 쓰기 | 프로퍼티 어트리뷰트 재정의 |
|---|
| 확장 금지 | Object.preventExtensions | X | O | O | O | O |
| 밀봉 | Object.seal | X | X | O | O | X |
| 동결 | Object.freeze | X | X | O | X | X |
16.5.1 객체 확장 금지
Object.preventExtensions 메서드 사용- 객체 확장 금지된 객체는 프로퍼티를 추가할 수 없다
Object.isExtensible 로 확인
const person = { name: 'Lee' };
console.log(Object.isExtensible(person));
Object.preventExtensions(person);
console.log(Object.isExtensible(person));
person.age = 20;
console.log(person);
delete person.name;
console.log(person);
Object.defineProperty(person, 'age', { value: 20 });
16.5.2 객체 밀봉
Object.seal 사용- 밀봉된 객체는 읽기와 쓰기만 가능
Object.isSealed로 확인
const person = { name: 'Lee' };
console.log(Object.isSealed(person));
Object.seal(person);
console.log(Object.isSealed(person));
console.log(Object.getOwnPropertyDescriptors(person));
person.age = 20;
console.log(person);
delete person.name;
console.log(person);
person.name = 'Kim';
console.log(person);
Object.defineProperty(person, 'name', { configurable: true });
16.5.3 객체 동결
Object.freeze 메서드 사용- 동결된 객체는 읽기만 가능
Object.isFrozen으로 확인
const person = { name: 'Lee' };
console.log(Object.isFrozen(person));
Object.freeze(person);
console.log(Object.isFrozen(person));
console.log(Object.getOwnPropertyDescriptors(person));
person.age = 20;
console.log(person);
delete person.name;
console.log(person);
person.name = 'Kim';
console.log(person);
Object.defineProperty(person, 'name', { configurable: true });
16.5.4 불변 객체
- 변경 방지는 직속 프로퍼티만 변경이 방지되고 중첩된 객체에는 영향을 주지 못함
- 중첩된 객체까지 변경 방지하려면 모든 프로퍼티에 대해 재귀적으로 메서드를 호출해야함
function deepFreeze(target) {
if (target && typeof target === 'object' && !Object.isFrozen(target)) {
Object.freeze(target);
Object.keys(target).forEach(key => deepFreeze(target[key]));
}
return target;
}
const person = {
name: 'Lee',
address: { city: 'Seoul' }
};
deepFreeze(person);
console.log(Object.isFrozen(person));
console.log(Object.isFrozen(person.address));
person.address.city = 'Busan';
console.log(person);
