[[]]를 통해 내부 슬롯과 내부 메서드를 표현한다.
이 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 직접적으로 개발자가 접근할 수 없다.
단 [[ProtoType]]
과 같은 내부 슬롯은 __proto__
로 간접적으로 접근 가능하다.
자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.
프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯 [[Value]]
[[Writable]]
[[Enumerable]]
[[Configurable]]
이다.
직접 접근할 수 없지만 Object.getOwnPropertyDescriptor
메서드를 통해 간접적으로 확인할 수 있다.
Object.getOwnPropertyDescriptor
는 프로퍼티 디스크립터 객체를 반환한다.
const person = {
name: 'Lee'
};
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
ES8에서 도입된 Object.getOwnPropertyDescriptors()
메서드는 모든 프로퍼티의 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다.
자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티이다.
접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법은 다음과 같다.
// 일반 객체의 __proto__는 접근자 프로퍼티이다.
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// 함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function() {}, 'prototype');
프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다.
Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다.
const person = {};
Object.defineProperty(person, 'firstName', {
value: 'ungmo',
writble: true,
enumerable: true,
configurable: true
});
Object.defineProperty(person, 'lastName', {
value: 'lee',
});
// 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
console.log(Object.getOwnPropertyDescriptor(person, 'lastName'));
// 삭제 불가 ([[Configurable]] false)
delete person.lastName;
// 변경 불가 ([[Writable]] false)
person.lastName = 'Kim';
// 프로퍼티 정의 재정의 불가 ([[Configurable]])) false)
Object.defineProperty(person, 'lastName', { enumerable: true });
Object.defineProperty(person, 'fullName', {
get() {
return `${this.firstName} ${this.lastName}`;
}
set(name) {
[this.firstName, this.lastName] = name.split(' ');
},
enumerable: true,
})
여러개의 프로퍼티를 정의하기 위해서는
Object.defineProperties
메서드를 이용한다.
Object.preventExtensions
객체 확장 금지란 프로퍼티 추가 금지를 의미한다. (동적 추가 및 Object.defineProperty를 통한 추가 금지)
확장이 가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.
Object.seal
Object.seal 메서드는 읽기와 쓰기만 가능하다. (configurable이 false이다.)
가능 여부는 Object.isSealed 메서드로 확인할 수 있다.
Object.freeze
읽기만 가능하다.
동결 여부는 Object.isFrozen 메서드로 확인할 수 있다.
Object.freeze 메서드는 얕은 변경 방지만 지원한다.
중첩 객체에 대해서도 모두 Object.freeze 메서드를 호출해줘야 불변객체가 된다.
function deepFreeze(target) {
if (target && typeof target === 'object' && !Object.isFrozen(target)) {
Object.freeze(target);
Object.keys(target).forEach(key => deepFreeze(target[key]));
}
return target;
}
출처: 모던 자바스크립트 - 이웅모 (16장 프로퍼티 어트리뷰트)
책의 깊이가 깊다. 추천