JavaScript
#3 JavaScript - 객체(Object)의 프로퍼티 어트리뷰트
림디
2024. 12. 3. 18:00
반응형
자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.
프로퍼티 어트르뷰트에는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이 있다.
value | 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반횐되는값 |
writable | 프로퍼티 변경 가능 여부를 나타내며 불리언 값 |
enumerable | 프포퍼티 열거 가능 여부를 나타내는 불리언 값 |
configurable | 프로퍼티 재정의 가능 여부를 나타내는 불리언 값 |
[[]]는 내부 슬롯과 내부 메서드를 말한다.
프로퍼티 어트리뷰트에는 직접 접근할 수 없지만 Object.OnwPropertyDescriptor 메서드를 사용하여 확인 가능하다.
Object.OnwPropertyDescriptor는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터(PropertyDescriptor) 객체를 반환한다.
만약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크럽터를 요구하면 undefinded를 반환한다.
const object1 = {
property1: 42,
};
const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');
const descriptor2 = Object.getOwnPropertyDescriptor(object1, 'property2');
console.log(descriptor1.configurable);
// Expected output: true
console.log(descriptor1.value);
// Expected output: 42
console.log(descriptor2.configurable);
// Error: Cannot read properties of undefined (reading 'configurable')
console.log(descriptor2.value);
// Error: Cannot read properties of undefined (reading 'value')
const object1 = {};
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false,
});
object1.property1 = 77;
// Throws an error in strict mode
Object.defineProperty(object1, 'property2', {
value: 42,
writable: true,
});
object1.property2 = 77;
console.log(object1.property1);
console.log(object1.property2);
>42
>77
객체는 프로퍼티를 추가, 삭제, 갱신이 가능하고 프로퍼티 어트리뷰트를 재정이 할 수도 있다.
따라서 객체의 변경을 방지 하려면 Object.preventExtensions, Object.seal, Object.freeze를 사용하면 된다.
Object.preventExtensions | 프로퍼티 삭제 , 읽기, 쓰기 가능 및 어트리뷰트 재정의 가능 |
Object.seal | 프로퍼티 읽기, 쓰기 가능 |
Object.freeze | 프로퍼티 읽기 가능 |
읽기만 가능한 객체를 만들려고 할때, 중첩 객체의 경우 객체를 값으로 같는 모든 프로퍼티의 재귀적으로 Object.freeze를 사용해야 한다.
참고 링크:
- https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze